Merge pull request #1252 from merico-dev/1250-update-default-chart-style-by-new-design

1250 update default chart style by new design

Author: GerilLeto

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "10.47.1",
+  "version": "10.48.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "10.47.1",
+  "version": "10.48.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/panel/panel-render/use-download-panel-screenshot.ts

@@ -21,7 +21,7 @@ export function useDownloadPanelScreenshot(panel: PanelRenderModelInstance) {
         style: { border: 'none', borderRadius: 0, transformOrigin: '0 0', transform: 'scale(2)' },
       })
       .then((blob: string) => {
-        window.saveAs(blob, `${panel.title ? panel.title : panel.viz.type}.png`);
+        window.saveAs(blob, `${panel.name ? panel.name : panel.viz.type}.png`);
       });
   };
   return { ref, downloadPanelScreenshot };

dashboard/src/components/plugins/viz-components/boxplot-chart/option/index.ts

@@ -10,6 +10,7 @@ import { getSeries } from './series';
 import { getTooltip } from './tooltip';
 import { getReferenceLines } from './reference-line';
 import { getGrid } from './grid';
+import { defaultEchartsOptions } from '~/styles/default-echarts-options';
 
 interface IGetOption {
   config: IBoxplotChartConf;
@@ -28,42 +29,31 @@ export function getOption({ config, data, variables }: IGetOption) {
     legend: getLegend({ config }),
     tooltip: getTooltip({ config }),
     xAxis: [
-      {
+      defaultEchartsOptions.getXAxis({
         type: 'category',
         name: x_axis.name,
         nameGap: 25,
         nameLocation: 'center',
         nameTextStyle: {
-          fontWeight: 'bold',
           align: 'center',
         },
-        axisTick: {
-          show: true,
-          alignWithLabel: true,
-        },
         axisLabel: {
           ...x_axis.axisLabel,
           ...overflowOption,
           formatter: getEchartsXAxisLabel(x_axis.axisLabel.formatter),
         },
-      },
+      }),
     ],
     yAxis: [
-      {
+      defaultEchartsOptions.getYAxis({
         name: y_axis.name,
         minInterval: 1,
-        nameTextStyle: {
-          fontWeight: 'bold',
-        },
-        axisLine: {
-          show: true,
-        },
         axisLabel: {
           formatter: function (value: number) {
             return numbro(value).format(y_axis.label_formatter);
           },
         },
-      },
+      }),
     ],
     series: [...series, ...getReferenceLines(reference_lines, variables, data)],
   };

dashboard/src/components/plugins/viz-components/boxplot-chart/option/legend.ts

@@ -15,7 +15,7 @@ export function getLegend({ config }: { config: IBoxplotChartConf }) {
         name: 'Outlier',
         icon: 'circle',
         itemStyle: {
-          color: '#2F8CC0',
+          color: '#ED6A45',
         },
       },
     ],

dashboard/src/components/plugins/viz-components/boxplot-chart/option/reference-line.ts

@@ -24,7 +24,9 @@ export function getReferenceLines(
         },
       ],
       silent: true,
-      symbol: ['none', 'none'],
+      symbol: ['none', 'triangle'],
+      symbolRotate: 90,
+      symbolSize: [10, 8],
       label: {
         formatter: function () {
           return templateToString(r.template, variables, data);

dashboard/src/components/plugins/viz-components/boxplot-chart/option/series.ts

@@ -27,9 +27,9 @@ export function getSeries(conf: IBoxplotChartConf) {
     {
       name: 'Outlier',
       type: 'scatter',
-      symbolSize: 5,
+      symbolSize: 7,
       itemStyle: {
-        color: '#2F8CC0',
+        color: '#ED6A45',
       },
       emphasis: {
         scale: 2,

dashboard/src/components/plugins/viz-components/boxplot-chart/type.ts

@@ -69,7 +69,7 @@ export const DEFAULT_CONFIG: IBoxplotChartConf = {
   tooltip: {
     metrics: [],
   },
-  color: '#228be6',
+  color: 'rgba(99, 152, 199, 0.10)',
   reference_lines: [],
   legend: {
     show: true,

dashboard/src/components/plugins/viz-components/cartesian/option/series/series_items.ts

@@ -45,6 +45,14 @@ export function getSeriesItemOrItems(
     },
     ...rest,
   };
+  if (rest.type === 'line') {
+    seriesItem.lineStyle = {
+      shadowColor: 'rgba(255,255,255,1)',
+      shadowBlur: 0,
+      shadowOffsetX: 0,
+      shadowOffsetY: 3,
+    };
+  }
   if (display_name_on_line) {
     seriesItem.endLabel = {
       show: true,

dashboard/src/components/plugins/viz-components/cartesian/option/x-axis.ts

@@ -1,4 +1,5 @@
 import { getLabelOverflowOptionOnAxis } from '~/components/plugins/common-echarts-fields/axis-label-overflow';
+import { defaultEchartsOptions } from '~/styles/default-echarts-options';
 import { getEchartsXAxisLabel } from '../editors/x-axis/x-axis-label-formatter/get-echarts-x-axis-tick-label';
 import { ICartesianChartConf } from '../type';
 
@@ -7,21 +8,17 @@ export function getXAxes(conf: ICartesianChartConf, xAxisData: $TSFixMe[]) {
   const overflowOption = getLabelOverflowOptionOnAxis(overflow.on_axis);
   const xDataEmpty = xAxisData.length === 0;
   return [
-    {
+    defaultEchartsOptions.getXAxis({
       data: xAxisData,
       name: conf.x_axis_name ?? '',
       nameGap: xDataEmpty ? 5 : undefined,
       id: 'main-x-axis',
-      axisTick: {
-        show: true,
-        alignWithLabel: true,
-      },
       type: conf.x_axis.type,
       axisLabel: {
         ...axisLabel,
         ...overflowOption,
         formatter: getEchartsXAxisLabel(axisLabel.formatter),
       },
-    },
+    }),
   ];
 }