Merge pull request #1164 from merico-dev/1150-automatically-decrease-heat-blocks-border-in-heatmap

1150 automatically decrease heat blocks border in heatmap

Author: GerilLeto

api/package.json

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

dashboard/package.json

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

dashboard/src/components/plugins/viz-components/heatmap/option/index.ts

@@ -8,14 +8,32 @@ import { getTooltip } from './tooltip';
 import { getVisualMap } from './visual-map';
 import { getXAxis } from './x-axis';
 import { getYAxis } from './y-axis';
+import _ from 'lodash';
+import { parseDataKey } from '~/utils/data';
 
 const defaultOption = {
   tooltip: {
     confine: true,
   },
 };
 
-export function getOption(conf: IHeatmapConf, data: TPanelData, variables: ITemplateVariable[]) {
+function calcBorderWidth(xlen: number, ylen: number, width: number, height: number) {
+  if (width < xlen * 10 || height < ylen * 10) {
+    return 0;
+  }
+  if (width < xlen * 20 || height < ylen * 20) {
+    return 1;
+  }
+  return 2;
+}
+
+export function getOption(
+  conf: IHeatmapConf,
+  data: TPanelData,
+  variables: ITemplateVariable[],
+  width: number,
+  height: number,
+) {
   if (!conf.x_axis.data_key || !conf.y_axis.data_key || !conf.heat_block.data_key) {
     return {};
   }
@@ -28,10 +46,18 @@ export function getOption(conf: IHeatmapConf, data: TPanelData, variables: ITemp
   const labelFormatters = getLabelFormatters(conf);
   const valueFormatters = getValueFormatters(conf);
 
+  const x = parseDataKey(conf.x_axis.data_key);
+  const y = parseDataKey(conf.y_axis.data_key);
+  const h = parseDataKey(conf.heat_block.data_key);
+  const xData = _.uniq(data[x.queryID].map((d) => d[x.columnKey]));
+  const yData = _.uniq(data[x.queryID].map((d) => d[y.columnKey]));
+  const seriesData = data[x.queryID].map((d) => [_.get(d, x.columnKey), _.get(d, y.columnKey), _.get(d, h.columnKey)]);
+  const borderWidth = calcBorderWidth(xData.length, yData.length, width, height);
+
   const customOptions = {
-    xAxis: getXAxis(conf, data, labelFormatters.x_axis),
-    yAxis: getYAxis(conf, data, labelFormatters.y_axis),
-    series: getSeries(conf, data),
+    xAxis: getXAxis(conf, xData, labelFormatters.x_axis),
+    yAxis: getYAxis(conf, yData, labelFormatters.y_axis),
+    series: getSeries(conf, seriesData, borderWidth),
     tooltip: getTooltip(conf, data, labelFormatters, valueFormatters),
     grid: getGrid(conf),
     visualMap: getVisualMap(conf, variableValueMap),

dashboard/src/components/plugins/viz-components/heatmap/option/series.ts

@@ -1,16 +1,7 @@
-import _ from 'lodash';
-import { parseDataKey } from '~/utils/data';
 import { IHeatmapConf } from '../type';
 
-export function getSeries(conf: IHeatmapConf, data: TPanelData) {
-  const { x_axis, y_axis, heat_block } = conf;
-  const x = parseDataKey(x_axis.data_key);
-  const y = parseDataKey(y_axis.data_key);
-  const h = parseDataKey(heat_block.data_key);
-
-  const seriesData = data[x.queryID].map((d) => {
-    return [_.get(d, x.columnKey), _.get(d, y.columnKey), _.get(d, h.columnKey)];
-  });
+export function getSeries(conf: IHeatmapConf, seriesData: any[], borderWidth: number) {
+  const { heat_block } = conf;
 
   return {
     type: 'heatmap',
@@ -20,7 +11,7 @@ export function getSeries(conf: IHeatmapConf, data: TPanelData) {
     datasetIndex: 0,
     itemStyle: {
       borderColor: 'white',
-      borderWidth: 2,
+      borderWidth,
     },
     data: seriesData,
     label: heat_block.label,

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

@@ -1,13 +1,8 @@
-import _ from 'lodash';
-import { parseDataKey } from '~/utils/data';
 import { getLabelOverflowOptionOnAxis } from '../../../common-echarts-fields/axis-label-overflow';
 import { FormatterFuncType } from '../editors/x-axis/x-axis-label-formatter/get-echarts-x-axis-tick-label';
 import { IHeatmapConf } from '../type';
 
-export function getXAxis(conf: IHeatmapConf, data: TPanelData, formatterFunc: FormatterFuncType) {
-  const x = parseDataKey(conf.x_axis.data_key);
-  const xData = _.uniq(data[x.queryID].map((d) => d[x.columnKey]));
-
+export function getXAxis(conf: IHeatmapConf, xData: any[], formatterFunc: FormatterFuncType) {
   const { overflow, rotate } = conf.x_axis.axisLabel;
   const overflowOption = getLabelOverflowOptionOnAxis(overflow.on_axis);
   return {

dashboard/src/components/plugins/viz-components/heatmap/option/y-axis.ts

@@ -1,15 +1,9 @@
-import _ from 'lodash';
-import { parseDataKey } from '~/utils/data';
 import { getLabelOverflowOptionOnAxis } from '../../../common-echarts-fields/axis-label-overflow';
 import { FormatterFuncType } from '../editors/x-axis/x-axis-label-formatter/get-echarts-x-axis-tick-label';
 import { IHeatmapConf } from '../type';
 
-export function getYAxis(conf: IHeatmapConf, data: TPanelData, formatterFunc: FormatterFuncType) {
-  const x = parseDataKey(conf.x_axis.data_key);
-  const y = parseDataKey(conf.y_axis.data_key);
-
+export function getYAxis(conf: IHeatmapConf, yData: any[], formatterFunc: FormatterFuncType) {
   const { nameAlignment, data_key, ...rest } = conf.y_axis;
-  const yData = _.uniq(data[x.queryID].map((d) => d[y.columnKey]));
 
   const { overflow, rotate } = conf.y_axis.axisLabel;
   const overflowOption = getLabelOverflowOptionOnAxis(overflow.on_axis);

dashboard/src/components/plugins/viz-components/heatmap/viz-heatmap.tsx

@@ -83,8 +83,8 @@ function Chart({
   }, [handleHeatBlockClick]);
 
   const option = React.useMemo(() => {
-    return getOption(conf, data, variables);
-  }, [conf, data]);
+    return getOption(conf, data, variables, width, height);
+  }, [conf, data, width, height]);
 
   if (!width || !height) {
     return null;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "10.29.0",
+  "version": "10.30.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "10.29.0",
+  "version": "10.30.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "10.29.0",
+  "version": "10.30.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"