ぬるさく画面に再チャレンジ

konno kiyotaka

以前

Nuxt.js と Python でつくるぬるさく AI アプリ開発入門

途中で分からなくなってしまい中断していましたが、改めてやってみようと思います。

まずは、Vuetifyのスライダーでの入力画面と、amChartsのグラフ表示。

router-linkによるメニュー追加

現在、v-navigation-drawer > v-list > router-linkという階層で、メニューを作っており、、、が並んでいる状態で、ここに、を追加したいと思います。

そして、こんなものは、単にコピペーして、文字変えれば良いのではと思ったのですが、なかなか反応してくれません。
結構調べましたが、解消せず。最後の最後に、再起動（docker-compose down、 docker-compose up -d）を行ったら見事（？）反映されました。

Vuetify Slider コンポーネント

前回はスッキリ行きませんでしたが、今回はこれはあっさりできました。

components/FormCard.vue

<template>
    <v-card class="ma-2 pa-1">
        <div class="subheading">
            Heading
        </div>
        <div class="caption">
            1/11
        </div>
        <v-slider class="px-5 pt-5 pb-3"
        thumb-label="always"
        height="3"
        hide-details></v-slider>
    </v-card>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    
})
</script>

pages/wine/index.vue

<template>
 <v-layout column>
   <form-card v-for="i in 11" :key="'${i}'"></form-card>
   <v-btn @click="submit">診断結果を表示する</v-btn>
 </v-layout>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import FormCard from '~/components/FormCard.vue';
import VueRouter from 'vue-router'

@Component({
  components: {
    FormCard
  }
})
export default class Index extends Vue {
  isError: boolean = false
  $router: VueRouter

  submit(){
      this.isError = false
      this.$router.push('/wine/result')
  }
}
</script>

amChartsによるグラフ表示

amCharts: JavaScript Charts & Maps

ぬるさく本には、amChartsの環境整備についてはあまり書かれていませんが、方法としては二つ。
https://www.amcharts.com/download/
今回は、npmでインストール。

docker-compose run app sh
npm install @amcharts/amcharts4

ただ、これだとエラーが発生します。

Missing write access to /app/node_modules/grpc/node_modules/needle/node_modules/
tslint-eslint-rules@5.4.0 requires a peer of tslint@^5.0.0 but none is installed. You must install peer dependencies yourself.
nuxt-typescript-vuetify-starter@1.0.0 No repository field.

書き込み権限がないということなので、試しにsuでもう一度実行すると、今度は別のエラー。

found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

言われるがまま、npm audit fixをするとOK。念の為、再起動。

docker-compose down
docker-compose up -d
docker-compose ps
docker-compose logs -f --tail 30 app

またエラーが発生しています。

ERROR  Failed to compile with 1 errors
app_1  | 
app_1  | friendly-errors 00:04:48 This dependency was not found:
app_1  | friendly-errors 00:04:48 
app_1  | friendly-errors 00:04:48 * nuxt-class-component in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vuetify-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./components/ResultChart.vue?vue&type=script&lang=js&

では、ということで

npm install --save nuxt-class-component

これでエラーは解消です。

しかし、グラフが表示されない。amChartsの別のサンプルは表示される。結論としては、データ生成ができていない。ぬるさく本では、この段階では、とりあえずのサンプルとして、

const data = []
const wineAttr = this.$store.getters.GET_WINE_ATTR
for (let i in 12){
    data.push({category: i, value: i});
}

chart.data = data;

とするのですが、ちゃんとデータがセットされていないようです。
https://www.amcharts.com/docs/v4/chart-types/radar-chart/
にしたがって、固定でデータセットすると、見事表示されました。

chart.data = [{
"category": "Lithuania",
"value": 501,
"units": 250
}, {
"category": "Czech Republic",
"value": 301,
"units": 222
}, {
"category": "Ireland",
"value": 266,
"units": 179
}, {
"category": "Germany",
"value": 165,
"units": 298
}, {
"category": "Australia",
"value": 139,
"units": 299
}, {
"category": "Austria",
"value": 336,
"units": 185
}, {
"category": "UK",
"value": 290,
"units": 150
}, {
"category": "Belgium",
"value": 325,
"units": 382
}, {
"category": "The Netherlands",
"value": 40,
"units": 172
}];

Firebaseサイト、またログインが動かなくなっている。しかし、こちらのURLなら大丈夫。
https://titanicfire-d43cd.firebaseapp.com/
同じものじゃないの？？

アーカイブ