Fix multiple charting bugs (#306)

#306
pinterest · Nov 9, 2020 · 34934ca · 34934ca
1 parent ef96841
commit 34934ca
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 13 deletions.
diff --git a/datahub/config/datadoc.yaml b/datahub/config/datadoc.yaml
@@ -62,7 +62,7 @@ cell_types:
             visual:
                 legend_position: ''
                 legend_display: true
-
+                connect_missing: false
                 values:
                     display: 0
                     position: 'center'

diff --git a/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx b/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
@@ -501,13 +501,8 @@ const DataDocChartComposerComponent: React.FunctionComponent<
                     }))}
                 />
             </FormField>
-            {['area', 'bar', 'histogram'].includes(values.chartType) ? (
-                <SimpleField
-                    type="checkbox"
-                    label="Stack Chart"
-                    name="stack"
-                    disabled={values.chartType === 'area'}
-                />
+            {['bar', 'histogram'].includes(values.chartType) ? (
+                <SimpleField type="checkbox" label="Stack Chart" name="stack" />
             ) : null}
         </>
     );
@@ -817,6 +812,16 @@ const DataDocChartComposerComponent: React.FunctionComponent<
                         {seriesColorDOM}
                     </>
                 )}
+                {['line', 'area'].includes(values.chartType) ? (
+                    <>
+                        <FormSectionHeader>Line Formatting</FormSectionHeader>
+                        <SimpleField
+                            label="Connect missing data"
+                            name="connectMissing"
+                            type="checkbox"
+                        />
+                    </>
+                ) : null}
             </>
         );
 
@@ -1050,6 +1055,8 @@ function formValsToMeta(vals: IChartFormValues, meta: IDataChartCellMeta) {
         draft.title = vals.title;
         draft.visual.legend_position = vals.legendPosition;
         draft.visual.legend_display = vals.legendDisplay;
+        draft.visual.connect_missing = vals.connectMissing;
+
         draft.visual.values = {
             display: vals.valueDisplay ?? chartValueDisplayType.FALSE,
             position: vals.valuePosition,

diff --git a/datahub/webapp/const/dataDocChart.ts b/datahub/webapp/const/dataDocChart.ts
@@ -160,6 +160,7 @@ export enum chartValueDisplayType {
 export interface IChartVisualMeta {
     legend_position?: ChartLegendPositionType;
     legend_display?: boolean;
+    connect_missing?: boolean;
 
     values: {
         display: chartValueDisplayType;
@@ -230,6 +231,7 @@ export interface IChartFormValues {
     title: string;
     legendPosition: 'top' | 'bottom' | 'right' | 'left';
     legendDisplay: boolean;
+    connectMissing: boolean;
 
     valueDisplay: chartValueDisplayType;
     valuePosition: 'center' | 'start' | 'end';

diff --git a/datahub/webapp/lib/chart/chart-data-processing.ts b/datahub/webapp/lib/chart/chart-data-processing.ts
@@ -7,11 +7,19 @@ import { ChartScaleType } from 'const/dataDocChart';
 import { colorPalette, colorPaletteFill, fillColor } from 'const/chartColors';
 
 function processDataPoint(val: any, scale: ChartScaleType) {
+    // val type validation
+    if (val == null) {
+        return null;
+    }
+
+    // Convert data by Axis type
     if (scale === 'category') {
         return val;
     } else if (scale === 'time' && isNaN(val)) {
-        return Number(new Date(val));
+        return new Date(val);
     }
+
+    // by default, a point is a number
     return Number(val);
 }
 

diff --git a/datahub/webapp/lib/chart/chart-meta-processing.ts b/datahub/webapp/lib/chart/chart-meta-processing.ts
@@ -129,6 +129,8 @@ export function mapMetaToFormVals(
         title: meta.title || '',
         legendPosition: meta.visual.legend_position ?? 'top',
         legendDisplay: meta.visual.legend_display ?? true,
+        connectMissing: meta.visual.connect_missing ?? false,
+
         valueDisplay:
             meta.visual.values?.display ?? chartValueDisplayType.FALSE,
         valuePosition: meta.visual.values?.position,
@@ -181,6 +183,10 @@ export function mapMetaToChartOptions(
         },
     };
 
+    if (meta.visual.connect_missing != null) {
+        optionsObj.spanGaps = meta.visual.connect_missing;
+    }
+
     optionsObj['plugins'] = {
         datalabels: {
             display:
@@ -209,7 +215,7 @@ export function mapMetaToChartOptions(
                 )} (${percentage}%)`;
             },
             title: (tooltipItem, chartData) => {
-                return chartData.labels[tooltipItem[0].index];
+                return String(chartData.labels[tooltipItem[0].index]);
             },
         };
     } else {
@@ -220,14 +226,14 @@ export function mapMetaToChartOptions(
                 const value = tooltipItem.value;
                 return ` ${label}: ${formatNumber(value)}`;
             },
-            title: (tooltipItem, chartData) => {
+            title: (tooltipItem, chartData): string => {
                 if (meta.chart.y_axis.stack) {
                     let totalValue = 0;
                     for (const value of tooltipItem) {
                         totalValue += Number(value.yLabel);
                     }
                     if (isNaN(totalValue)) {
-                        return chartData.labels[tooltipItem[0].index];
+                        return String(chartData.labels[tooltipItem[0].index]);
                     } else {
                         return (
                             chartData.labels[tooltipItem[0].index] +
@@ -236,7 +242,7 @@ export function mapMetaToChartOptions(
                         );
                     }
                 } else {
-                    return chartData.labels[tooltipItem[0].index];
+                    return String(chartData.labels[tooltipItem[0].index]);
                 }
             },
         };