Fix/charts (#3123)

* fix wording in charts * Wording and name and label switch --------- Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
openforis · Nov 2, 2023 · ae115b2 · ae115b2
1 parent 01874be
commit ae115b2
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 30 deletions.
diff --git a/webapp/views/App/views/Data/Charts/Charts.js b/webapp/views/App/views/Data/Charts/Charts.js
@@ -28,7 +28,7 @@ const Charts = () => {
     if (D3_CHART_TYPES.includes(spec.chartType) && !chartData) {
       renderChart()
     }
-  }, [spec, chartData]) // this effect runs whenever spec or chartData changes
+  }, [spec, chartData])
 
   return (
     <div className={classNames('charts', { 'full-screen': fullScreen })}>

diff --git a/webapp/views/App/views/Data/Charts/components/DataSelector/DataSelector.js b/webapp/views/App/views/Data/Charts/components/DataSelector/DataSelector.js
@@ -13,10 +13,11 @@ import NodeDefLabelSwitch from '@webapp/components/survey/NodeDefLabelSwitch'
 import classNames from 'classnames'
 
 const DimensionGroup = ({ dimensionGroup }) => {
+  const { label, options } = dimensionGroup
   const [visible, setVisible] = useState(false)
 
   return (
-    <div className="charts_data-selector_group-dimension" key={dimensionGroup.label}>
+    <div className="charts_data-selector_group-dimension" key={label}>
       <p>
         <button
           type="button"
@@ -25,14 +26,14 @@ const DimensionGroup = ({ dimensionGroup }) => {
         >
           <span className={classNames('icon icon-12px icon-play3')} />
         </button>
-        <b>{dimensionGroup.label}</b>
+        <b>{label}</b>
       </p>
       {visible && (
         <div className="charts_data-selector_group-dimension">
-          {dimensionGroup.options?.map((dimension) => (
-            <div key={dimension.name} className="charts_data-selector_dimension">
-              {dimension.label}
-              {dimension.icon}
+          {options?.map(({ name, label: optionLabel, icon }) => (
+            <div key={name} className="charts_data-selector_dimension">
+              {optionLabel}
+              {icon}
             </div>
           ))}
         </div>
@@ -54,7 +55,8 @@ const DataSelector = ({ setEntityDefUuid, entityDefUuid, dimensions, nodeDefLabe
         onChange={setEntityDefUuid}
         showSingleEntities={false}
         disabled={false}
-        useNameAsLabel={true}
+        useNameAsLabel={false}
+        allowEmptySelection={false}
       />
 
       <br />
@@ -64,7 +66,7 @@ const DataSelector = ({ setEntityDefUuid, entityDefUuid, dimensions, nodeDefLabe
           <br />
           <div className="charts_data-selector_group-dimension_container">
             {dimensions
-              .filter((dimension) => dimension.options.length > 0)
+              .filter(({ options }) => options.length > 0)
               .map((dimensionGroup) => (
                 <DimensionGroup key={dimensionGroup.label} dimensionGroup={dimensionGroup} />
               ))}
@@ -77,12 +79,36 @@ const DataSelector = ({ setEntityDefUuid, entityDefUuid, dimensions, nodeDefLabe
   )
 }
 
+DimensionGroup.propTypes = {
+  dimensionGroup: PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    options: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        icon: PropTypes.node,
+      })
+    ).isRequired,
+  }).isRequired,
+}
+
 DataSelector.propTypes = {
   entityDefUuid: PropTypes.string,
   setEntityDefUuid: PropTypes.func.isRequired,
   toggleLabelFunction: PropTypes.func.isRequired,
   nodeDefLabelType: PropTypes.string.isRequired,
-  dimensions: PropTypes.any,
+  dimensions: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      options: PropTypes.arrayOf(
+        PropTypes.shape({
+          name: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+          icon: PropTypes.node,
+        })
+      ),
+    })
+  ),
 }
 
 export default DataSelector
diff --git a/webapp/views/App/views/Data/Charts/constants/chartTypes.js b/webapp/views/App/views/Data/Charts/constants/chartTypes.js
@@ -2,7 +2,6 @@ export const CHART_TYPES = {
   SCATTER_PLOT: 'scatterPlot',
   BAR_CHART: 'barChart',
   PIE_CHART: 'pieChart',
-  // Add more chart types as needed
 }
 
 export const D3_CHART_TYPES = [CHART_TYPES.SCATTER_PLOT, CHART_TYPES.BAR_CHART]
diff --git a/webapp/views/App/views/Data/Charts/state/blocks/MetricBlock/index.js b/webapp/views/App/views/Data/Charts/state/blocks/MetricBlock/index.js
@@ -17,16 +17,15 @@ const _blocks = {
   },
   aggregation: {
     id: 'aggregation',
-    title: 'Aggregation',
+    title: 'Method',
     type: 'select',
     options: [
-      { value: 'sum', label: 'Sum', name: 'sum', type: 'aggregation' },
       { value: 'average', label: 'Average', name: 'avg', type: 'aggregation' },
       { value: 'count', label: 'Count', name: 'count', type: 'aggregation' },
-      { value: 'variance', label: 'Variance', name: 'variance', type: 'aggregation' },
+      { value: 'max', label: 'Maximum', name: 'max', type: 'aggregation' },
       { value: 'median', label: 'Median', name: 'median', type: 'aggregation' },
       { value: 'min', label: 'Minimum', name: 'min', type: 'aggregation' },
-      { value: 'max', label: 'Maximum', name: 'max', type: 'aggregation' },
+      { value: 'sum', label: 'Sum', name: 'sum', type: 'aggregation' },
     ],
     optionsParams: { showIcons: false },
   },

diff --git a/webapp/views/App/views/Data/Charts/state/chartTypes/bar/index.js b/webapp/views/App/views/Data/Charts/state/chartTypes/bar/index.js
@@ -16,13 +16,13 @@ const bar = {
     blocks: {
       query: {
         title: 'Query',
-        subtitle: 'Config of the query for the bar chart',
+        subtitle: '',
         type: 'container',
         blocks: {
           groupBy: GroupByBlock({
+            subtitle: 'Select the metric to group the data ( X axis )',
             valuesToSpec: ({ value = [], spec = {} }) => {
               const transform = valuesToCalculations(value)
-
               const groupBy = {
                 field_uuid: transform.key,
                 field: transform.as,
@@ -40,6 +40,7 @@ const bar = {
             },
           }),
           metric: MetricBlock({
+            subtitle: 'Select the metric to measure the data ( Y axis )',
             valuesToSpec: ({ spec = {}, key, configItemsByPath }) => {
               const columnValues = configItemsByPath[`${key}.column`]?.value
               const aggregationValues = configItemsByPath[`${key}.aggregation`]?.value
@@ -68,17 +69,18 @@ const bar = {
       },
       other: {
         title: 'Custom Chart',
-        subtitle: 'Custom configuration of the chart',
+        subtitle: 'Configuration of the Chart',
         type: 'container',
         blocks: {
           'show-title': ShowLegendBlock({
             id: 'show-legend',
             title: 'Show Title',
             label: 'Show title',
             valuesToSpec: valuesToSpec('showTitle'),
-            defaultValue: false,
+            defaultValue: true,
           }),
           title: TitleBlock({
+            subtitle: '',
             valuesToSpec: valuesToSpec('title'),
           }),
           'show-legend': ShowLegendBlock({
@@ -91,7 +93,7 @@ const bar = {
           xTitle: TitleBlock({
             id: 'xAxis',
             title: 'Name of the X axis',
-            subtitle: 'Write here the name of the X axis',
+            subtitle: '',
             valuesToSpec: ({ value = [], spec = {} }) => {
               const newSpec = {
                 ...spec,
@@ -106,7 +108,7 @@ const bar = {
           yTitle: TitleBlock({
             id: 'yAxis',
             title: 'Name of the Y axis',
-            subtitle: 'Write here the name of the Y axis',
+            subtitle: '',
             valuesToSpec: ({ value = [], spec = {} }) => {
               const newSpec = {
                 ...spec,

diff --git a/webapp/views/App/views/Data/Charts/state/chartTypes/index.js b/webapp/views/App/views/Data/Charts/state/chartTypes/index.js
@@ -1,5 +1,4 @@
-import pie from './pie'
 import scatter from './scatter'
 import bar from './bar'
 
-export const chartsConfig = { pie, bar, scatter }
+export const chartsConfig = { bar, scatter }
diff --git a/webapp/views/App/views/Data/Charts/state/chartTypes/scatter/index.js b/webapp/views/App/views/Data/Charts/state/chartTypes/scatter/index.js
@@ -20,12 +20,12 @@ const scatter = {
     blocks: {
       query: {
         title: 'Query',
-        subtitle: 'Query for the Scatter plot',
+        subtitle: '',
         type: 'container',
         blocks: {
           metricX: SingleMetricBlock({
             id: 'metricX',
-            title: 'Metric X axis',
+            title: 'X axis',
             valuesToSpec: ({ value = [], spec = {}, key, configItemsByPath }) => {
               const columnValues = configItemsByPath[`${key}.column`]?.value
               const transform = valuesToCalculations(columnValues)
@@ -47,7 +47,7 @@ const scatter = {
           }),
           metricY: SingleMetricBlock({
             id: 'metricY',
-            title: 'Metric Y axis',
+            title: 'Y axis',
             valuesToSpec: ({ value = [], spec = {}, key, configItemsByPath }) => {
               const columnValues = configItemsByPath[`${key}.column`]?.value
               const transform = valuesToCalculations(columnValues)
@@ -102,7 +102,7 @@ const scatter = {
       },
       other: {
         title: 'Custom Chart',
-        subtitle: 'Custom configuration of the chart',
+        subtitle: 'Configuration of the Chart',
         type: 'container',
         blocks: {
           title: TitleBlock({
@@ -120,7 +120,7 @@ const scatter = {
           xAxis: TitleBlock({
             id: 'xAxis',
             title: 'Name of the X axis',
-            subtitle: 'Write here the name of the X axis',
+            subtitle: '',
             valuesToSpec: ({ value = [], spec = {}, configItemsByPath }) => {
               const newSpec = {
                 ...spec,
@@ -135,7 +135,7 @@ const scatter = {
           yAxis: TitleBlock({
             id: 'yAxis',
             title: 'Name of the Y axis',
-            subtitle: 'Write here the name of the Y axis',
+            subtitle: '',
             valuesToSpec: ({ value = [], spec = {}, configItemsByPath }) => {
               const newSpec = {
                 ...spec,

diff --git a/webapp/views/App/views/Data/Charts/state/hooks/useChartConfig.js b/webapp/views/App/views/Data/Charts/state/hooks/useChartConfig.js
@@ -1,7 +1,7 @@
 import { useCallback, useState, useEffect, useMemo } from 'react'
 
 const defaultConfig = {
-  type: 'pie',
+  type: 'bar',
   table: null,
   items: [],
 }