clear unwanted for chart

HugoIsNotBoss · Feb 15, 2022 · 0d170cd · 0d170cd
1 parent 9a51f7f
commit 0d170cd
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 246 deletions.
diff --git a/frontend/src/components/chart-components/BarChart.vue b/frontend/src/components/chart-components/BarChart.vue
@@ -1,92 +1,19 @@
-<template>
-    <div class="my-10 mx-2">
-        <p class="text-xl my-1">{{ name }}</p>
-        <p class="text-base my-1">{{ description }}</p>
-        <p class="text-sm my-1" v-if="highlightStatus">
-            Selected: {{ selectedData.dataLabel }},
-            {{ selectedData.dataValue }} of {{ selectedData.datasetLabel }}
-            <button
-                class="mx-2 my-2 bg-white transition duration-150 ease-in-out hover:bg-gray-100 rounded text-indigo-700 px-3 py-1 text-sm focus:outline-none"
-                @click="resetClick"
-            >
-                Reset
-            </button>
-        </p>
-        <bar-chart-extends
-            style="height: 250px;"
-            :chartData="chartData"
-            :baseColor="baseColor"
-            :highlightStatus="highlightStatus"
-            @highlightEvent="handleHighlightEvent"
-        />
-    </div>
-</template>
-
 <script>
-import BarChartExtends from "./chart-extends/BarChartExtends.vue";
-import { mapActions } from "vuex";
+import { Bar } from "vue-chartjs";
 
 export default {
-    name: "BarChart",
+    extends: Bar,
     props: {
-        id: String,
-        name: String,
-        description: String,
         chartData: Object,
     },
-    components: {
-        BarChartExtends,
-    },
-    data() {
-        return {
-            baseColor: [],
-            highlightStatus: false,
-            selectedData: {},
-        };
-    },
-    methods: {
-        ...mapActions(["setChartEventData"]),
-        resetClick() {
-            this.highlightStatus = false;
-            this.selectedData = {};
+    data: () => ({
+        chartOptions: {
+            responsive: true,
+            maintainAspectRatio: false,
         },
-        handleHighlightEvent(eventData) {
-            this.highlightStatus = eventData.status;
-            this.selectedData = eventData.clickData;
-            this.setChartEventData(eventData.clickData);
-        },
-    },
-    created() {
-        // Creates an array of the background color data variable in the dataset
-        // object using the color input from the prop.
-        this.baseColor = new Array(this.chartData.datasets.length).fill(
-            "#CCCCCC"
-        );
-        this.chartData.datasets.forEach((dataset, index) => {
-            if (dataset.data.length > 1) {
-                if (dataset.backgroundColor.constructor !== Array) {
-                    this.baseColor[index] = dataset.backgroundColor;
-                    dataset.backgroundColor = new Array(
-                        dataset.data.length
-                    ).fill(dataset.backgroundColor);
-                } else if (
-                    dataset.backgroundColor.length !== dataset.data.length
-                ) {
-                    this.baseColor[index] = dataset.backgroundColor[0];
-                    dataset.backgroundColor = new Array(
-                        dataset.data.length
-                    ).fill(dataset.backgroundColor[0]);
-                }
-            } else {
-                if (dataset.backgroundColor.constructor === Array) {
-                    this.baseColor[index] = dataset.backgroundColor[0];
-                } else {
-                    this.baseColor[index] = dataset.backgroundColor;
-                }
-            }
-        });
+    }),
+    mounted() {
+        this.renderChart(this.chartData, this.chartOptions);
     },
 };
 </script>
-
-<style></style>
diff --git a/frontend/src/components/chart-components/ChartControl.vue b/frontend/src/components/chart-components/ChartControl.vue
@@ -1,18 +1,18 @@
 <template>
-    <div>
+    <div class="my-10 mx-2">
+        <p class="text-xl my-1">{{ data.name }}</p>
+        <p class="text-base my-1">{{ data.description }}</p>
         <bar-chart
             v-if="data.type == 'BarChart'"
             :id="data.id"
-            :name="data.name"
-            :description="data.description"
             :chartData="data.chartdata"
+            style="height: 250px"
         />
         <line-chart
             v-if="data.type == 'LineChart'"
             :id="data.id"
-            :name="data.name"
-            :description="data.description"
             :chartData="data.chartdata"
+            style="height: 250px"
         />
     </div>
 </template>
@@ -33,7 +33,7 @@ export default {
     data() {
         return {
             // Delete after implementing charts.
-            chartTetst1: {
+            chartTetst: {
                 labels: ["January", "February", "March", "April"],
                 datasets: [
                     {
@@ -48,23 +48,8 @@ export default {
                     },
                 ],
             },
-            chartTetst2: {
-                labels: ["May", "June", "July", "August"],
-                datasets: [
-                    {
-                        label: "Data Three",
-                        backgroundColor: "#f87979",
-                        data: [60, 80, 50, 20],
-                    },
-                    {
-                        label: "Data Four",
-                        backgroundColor: "#f87979",
-                        data: [10, 50, 30, 80],
-                    },
-                ],
-            },
         };
-    },    
+    },
 };
 </script>
 

diff --git a/frontend/src/components/chart-components/LineChart.vue b/frontend/src/components/chart-components/LineChart.vue
@@ -1,93 +1,19 @@
-<template>
-    <div class="my-10 mx-2">
-        <p class="text-xl my-1">{{ name }}</p>
-        <p class="text-base my-1">{{ description }}</p>
-        <p class="text-sm my-1" v-if="highlightStatus">
-            Selected: {{ selectedData.dataLabel }},
-            {{ selectedData.dataValue }} of {{ selectedData.datasetLabel }}
-            <button
-                class="mx-2 my-2 bg-white transition duration-150 ease-in-out hover:bg-gray-100 rounded text-indigo-700 px-3 py-1 text-sm focus:outline-none"
-                @click="resetClick"
-            >
-                Reset
-            </button>
-        </p>
-        <line-chart-extends 
-            style="height: 250px;"
-            :chartData="chartData"
-            :baseColor="baseColor"
-            :highlightStatus="highlightStatus"
-            @highlightEvent="handleHighlightEvent"
-        />
-    </div>
-</template>
-
 <script>
-import LineChartExtends from "./chart-extends/LineChartExtends.vue";
-import { mapActions } from "vuex";
+import { Line } from "vue-chartjs";
 
 export default {
-    name: "LineChart",
+    extends: Line,
     props: {
-        id: String,
-        name: String,
-        description: String,
         chartData: Object,
     },
-    components: {
-        LineChartExtends,
-    },
-    data() {
-        return {
-            baseColor: [],
-            highlightStatus: false,
-            selectedData: {},
-        };
-    },
-    methods: {
-        ...mapActions(["setChartEventData"]),
-        resetClick() {
-            this.highlightStatus = false;
-            this.selectedData = {};
+    data: () => ({
+        chartOptions: {
+            responsive: true,
+            maintainAspectRatio: false,
         },
-        handleHighlightEvent(eventData) {
-            this.highlightStatus = eventData.status;
-            this.selectedData = eventData.clickData;
-            this.setChartEventData(eventData.clickData);
-        },
-    },
-    created() {
-        // Creates an array of the background color data variable in the dataset
-        // object using the color input from the prop.
-        this.baseColor = new Array(this.chartData.datasets.length).fill(
-            "#CCCCCC"
-        );
-        this.chartData.datasets.forEach((dataset, index) => {
-            dataset.fill = false;
-            if (dataset.data.length > 1) {
-                if (dataset.backgroundColor.constructor !== Array) {
-                    this.baseColor[index] = dataset.backgroundColor;
-                    dataset.backgroundColor = new Array(
-                        dataset.data.length
-                    ).fill(dataset.backgroundColor);
-                } else if (
-                    dataset.backgroundColor.length !== dataset.data.length
-                ) {
-                    this.baseColor[index] = dataset.backgroundColor[0];
-                    dataset.backgroundColor = new Array(
-                        dataset.data.length
-                    ).fill(dataset.backgroundColor[0]);
-                }
-            } else {
-                if (dataset.backgroundColor.constructor === Array) {
-                    this.baseColor[index] = dataset.backgroundColor[0];
-                } else {
-                    this.baseColor[index] = dataset.backgroundColor;
-                }
-            }
-        });
+    }),
+    mounted() {
+        this.renderChart(this.chartData, this.chartOptions);
     },
 };
 </script>
-
-<style></style>
diff --git a/frontend/src/components/chart-components/chart-utils.js b/frontend/src/components/chart-components/chart-utils.js
diff --git a/frontend/src/store/modules/backend-api.js b/frontend/src/store/modules/backend-api.js
@@ -36,7 +36,6 @@ const state = {
     TileLayerData: null,
     WMSTileLayerData: null,
     OverlayLayerInfo: null,
-    ChartEventData: null,
     InputComponentInfo: null,
     DrawFeatureData: {
         id: "draw-feature-id",
@@ -60,7 +59,6 @@ const getters = {
     getTileLayerData: (state) => state.TileLayerData,
     getWMSTileLayerData: (state) => state.WMSTileLayerData,
     getOverlayLayerInfo: (state) => state.OverlayLayerInfo,
-    getChartEventData: (state) => state.ChartEventData,
     getLayerVisibility: (state) => (id) => {
         // To obtain the visibility of the specific layer passed as argument.
         return state.OverlayLayerInfo.find((element) => element.id == id)
@@ -302,10 +300,6 @@ const actions = {
         commit("updateOverlayLayerVisibility", data);
     },
 
-    setChartEventData({ commit }, data) {
-        commit("commitChartEventData", data);
-    },
-
     setInputComponentData({ commit, state }, data) {
         if (!state.InputMutation) {
             commit("commitInputMutation", true);
@@ -452,9 +446,6 @@ const mutations = {
     commitInputMutation: (state, data) => {
         state.InputMutation = data;
     },
-    commitChartEventData: (state, data) => {
-        state.ChartEventData = data;
-    },
     updateOverlayLayerVisibility: (state, layerVisibility) => {
         const index = state.OverlayLayerInfo.findIndex(
             (layer) => layer.id === layerVisibility.id

diff --git a/library/src/greppo/input_types/bar_chart.py b/library/src/greppo/input_types/bar_chart.py
@@ -26,15 +26,15 @@ def __init__(
         description: str,
         x: List,
         y: List,
-        backgroundColor: str = "#000000",
+        color: str = "#000000",
         input_updates: Dict[str, Any] = {},
     ):
         self.input_name = name
         self.description = description
         self.input_updates = input_updates
 
-        # background is defaulted
-        dataset = Dataset(label=description, data=y, backgroundColor=backgroundColor)
+        _, label = name.split("_")
+        dataset = Dataset(label=label, data=y, backgroundColor=color)
         self.chartdata = ChartData(labels=x, datasets=[dataset])
 
     def get_value(self):

diff --git a/library/src/greppo/input_types/line_chart.py b/library/src/greppo/input_types/line_chart.py
@@ -25,18 +25,17 @@ def __init__(
         self,
         name: str,
         description: Optional[str],
-        x,  # TODO needs typing
-        y,
-        backgroundColor: str = "#000000",
+        x: List,
+        y: List,
+        color: str = "#000000",
         input_updates: Dict[str, Any] = {},
     ):
         self.input_name = name
         self.description = description
         self.input_updates = input_updates
-
-        # background is defaulted
-        dataset = Dataset(label=description, data=y,
-                          backgroundColor=backgroundColor)
+
+        _, label = name.split("_")
+        dataset = Dataset(label=label, data=y, backgroundColor=color)
         self.chartdata = ChartData(labels=x, datasets=[dataset])
 
     def get_value(self):

diff --git a/library/tests/app.py b/library/tests/app.py
@@ -120,7 +120,7 @@
     description="some_chart",
     x=[i for i in range(10)],
     y=y,
-    backgroundColor="rgb(255, 99, 132)",
+    color="rgb(255, 99, 132)",
 )
 
 y = []
@@ -132,5 +132,5 @@
     description="some_chart",
     x=[i for i in range(10)],
     y=y,
-    backgroundColor="rgb(200, 50, 150)",
+    color="rgb(200, 50, 150)",
 )
diff --git a/library/tests/ks_app.py b/library/tests/ks_app.py
@@ -1,6 +1,6 @@
 from greppo import app
 import geopandas as gpd
-import numpy as np 
+import numpy as np
 
 app.base_layer(
     name="CartoDB Light",
@@ -39,5 +39,5 @@
     description="some_chart",
     x=[i for i in range(10)],
     y=y,
-    backgroundColor="rgb(200, 50, 150)",
+    color="rgb(200, 50, 150)",
 )