Feat/charthub theme

packages/vchart-theme/src/chart-hub/common/color-scheme.ts

@@ -0,0 +1,69 @@
+import type { BuiltinColorPalette, IThemeColorScheme } from '@visactor/vchart';
+
+const defaultColor = [
+  // 定义分类主题色
+  '#1443FF',
+  '#33CCB2',
+  '#FFD500',
+  '#FFAA33',
+  '#FF7733',
+  '#F65656',
+  '#E93DBD',
+  '#9933FF',
+  '#5533FF',
+  '#A3ABC2'
+];
+
+const BLACK_COLORS = {
+  100: '#000',
+  95: '#0D0D0D',
+  85: '#262626',
+  65: '#595959',
+  45: '#8C8C8C',
+  25: '#BFBFBF',
+  15: '#D9D9D9',
+  6: '#F0F0F0'
+};
+
+const WHITE_COLORS = {
+  100: '#FFFFFF',
+  95: '#F2F2F2',
+  85: '#D9D9D9',
+  65: '#A6A6A6',
+  45: '#737373',
+  25: '#404040',
+  15: '#262626',
+  6: '#0F0F0F'
+};
+
+const blackColorPalettes = {};
+for (const key in BLACK_COLORS) {
+  blackColorPalettes[`blackColors${key}`] = BLACK_COLORS[key];
+}
+
+const whiteColorPalettes = {};
+for (const key in WHITE_COLORS) {
+  whiteColorPalettes[`whiteColors${key}`] = WHITE_COLORS[key];
+}
+
+export const colorScheme: IThemeColorScheme = {
+  default: {
+    dataScheme: defaultColor,
+    palette: {
+      bandColor: defaultColor[0],
+
+      /** 背景色 */
+      backgroundColor: 'transparent',
+
+      /** 轴线颜色 */
+      axisDomainColor: '#DCDEE1',
+      /** 轴标签字色 */
+      axisLabelFontColor: '#909199',
+      /** 轴网格线颜色 */
+      axisGridColor: '#E1E2E5',
+
+      ...blackColorPalettes,
+      ...whiteColorPalettes
+    } as Partial<BuiltinColorPalette>
+  }
+};

packages/vchart-theme/src/chart-hub/common/component/axis.ts

@@ -0,0 +1,65 @@
+import type { IComponentTheme } from '@visactor/vchart';
+
+export const axis: Pick<
+  IComponentTheme,
+  'axis' | 'axisAngle' | 'axisBand' | 'axisLinear' | 'axisRadius' | 'axisX' | 'axisY'
+> = {
+  axis: {
+    domainLine: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisDomainColor' }
+      }
+    },
+    grid: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisGridColor' },
+        lineDash: [4, 4]
+      }
+    },
+    subGrid: {
+      visible: false,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'axisGridColor' },
+        lineDash: [4, 4]
+      }
+    },
+    tick: {
+      visible: true,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'blackColors25' }
+      }
+    },
+    subTick: {
+      visible: false,
+      tickSize: 2,
+      style: {
+        lineWidth: 1,
+        stroke: { type: 'palette', key: 'blackColors15' }
+      }
+    },
+    label: {
+      visible: true,
+      space: 8,
+      style: {
+        fontSize: 12,
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontWeight: 400,
+        fillOpacity: 1
+      }
+    },
+    title: {
+      visible: false,
+      style: {
+        fill: { type: 'palette', key: 'blackColors65' },
+        fontSize: 12,
+        lineHeight: 12
+      }
+    }
+  }
+};

packages/vchart-theme/src/chart-hub/common/component/crosshair.ts

@@ -0,0 +1,33 @@
+import type { ICrosshairTheme } from '@visactor/vchart';
+
+export const crosshair: ICrosshairTheme = {
+  trigger: 'hover',
+  bandField: {
+    line: {
+      type: 'rect',
+      visible: true,
+      style: {
+        fill: '#CCD7EB',
+        fillOpacity: 0.4,
+        lineDash: []
+      }
+    },
+    label: {
+      visible: false
+    }
+  },
+  linearField: {
+    visible: false,
+    line: {
+      type: 'line',
+      style: {
+        stroke: '#CCD7EB',
+        lineWidth: 0.4,
+        lineDash: []
+      }
+    },
+    label: {
+      visible: false
+    }
+  }
+};

packages/vchart-theme/src/chart-hub/common/component/data-zoom.ts

@@ -0,0 +1,58 @@
+import type { IDataZoomTheme } from '@visactor/vchart-types';
+
+export const dataZoom: IDataZoomTheme = {
+  height: 44,
+  middleHandler: {
+    visible: false
+  },
+  startHandler: {
+    style: {
+      size: 22
+    }
+  },
+  selectedBackground: {
+    style: {
+      fill: '#6699FF',
+      fillOpacity: 0.2,
+      opacity: 1,
+      stroke: '#6699FF',
+      lineWidth: 2,
+      cornerRadius: 4
+    }
+  },
+  background: {
+    style: {
+      fill: '#F3F4F6',
+      fillOpacity: 0.2,
+      cornerRadius: 4,
+      stroke: '#EDEEF0',
+      opacity: 1,
+      lineWidth: 2
+    }
+  },
+  endHandler: {
+    style: {
+      size: 22
+    }
+  },
+  backgroundChart: {
+    area: {
+      style: {
+        fill: false,
+        stroke: '#6699FF'
+      }
+    },
+    line: {
+      style: {
+        fill: false,
+        stroke: '#6699FF'
+      }
+    }
+  },
+  startText: {
+    visible: false
+  },
+  endText: {
+    visible: false
+  }
+};

packages/vchart-theme/src/chart-hub/common/component/indicator.ts

@@ -0,0 +1,20 @@
+import type { IIndicatorTheme } from '@visactor/vchart';
+
+export const indicator: IIndicatorTheme = {
+  title: {
+    visible: true,
+    style: {
+      fill: '#12141A',
+      fontWeight: 500,
+      fontSize: 16
+    }
+  },
+  content: {
+    visible: true,
+    style: {
+      fill: '#85878A',
+      fontWeight: 400,
+      fontSize: 12
+    }
+  }
+};

packages/vchart-theme/src/chart-hub/common/component/legend.ts

@@ -0,0 +1,131 @@
+import type { IComponentTheme } from '@visactor/vchart';
+
+const commonColorLegendTheme = {
+  handlerText: {
+    space: 10,
+    style: {
+      fontSize: 12,
+      fill: '#2C3542'
+    }
+  },
+  title: {
+    space: 5,
+    style: {
+      fontSize: 12,
+      fill: '#2C3542'
+    }
+  }
+};
+
+export const legend: Partial<IComponentTheme> = {
+  discreteLegend: {
+    visible: true,
+    orient: 'top',
+    padding: [8, 8, 8, 8],
+    maxRow: 1,
+    title: {
+      visible: false,
+      textStyle: {
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontSize: 12,
+        lineHeight: 21
+      }
+    },
+    item: {
+      visible: true,
+      spaceCol: 24,
+      spaceRow: 12,
+      padding: 0,
+      background: {
+        visible: false
+      },
+      shape: {
+        space: 4,
+        style: {
+          size: 8,
+          symbolType: 'circle'
+        },
+        state: { unSelected: { fill: '#D8D8D8' } }
+      },
+      label: {
+        space: 100,
+        style: {
+          fill: '#85878A',
+          fontSize: 12,
+          lineHeight: 12,
+          opacity: 1,
+          fontWeight: 400
+        },
+        state: {
+          unSelected: {
+            fill: '#D8D8D8',
+            opacity: 1
+          }
+        }
+      }
+    },
+    pager: {
+      handler: {
+        space: 8,
+        style: {
+          size: 10,
+          fill: {
+            type: 'palette',
+            key: 'blackColors100'
+          }
+        }
+      },
+      textStyle: {
+        fill: { type: 'palette', key: 'blackColors45' },
+        fontSize: 10
+      }
+    },
+    allowAllCanceled: false
+  },
+  colorLegend: {
+    horizontal: {
+      ...commonColorLegendTheme,
+      handler: {
+        style: {
+          symbolType: 'rectRound',
+          size: 16,
+          scaleX: 0.5,
+          fill: '#fff',
+          lineWidth: 1,
+          stroke: '#99B0F3',
+          radius: 2,
+          outerBorder: null
+        }
+      },
+      rail: {
+        height: 4,
+        width: 100,
+        style: {
+          fill: '#DCDEE2'
+        }
+      }
+    },
+    vertical: {
+      ...commonColorLegendTheme,
+      handler: {
+        style: {
+          symbolType: 'rectRound',
+          size: 16,
+          scaleY: 0.5,
+          fill: '#fff',
+          lineWidth: 1,
+          stroke: '#99B0F3',
+          radius: 2,
+          outerBorder: null
+        }
+      },
+      rail: {
+        width: 4,
+        height: 100,
+        style: {
+          fill: '#DCDEE2'
+        }
+      }
+    }
+  }
+};