Merge pull request #5 from VisActor/feat/legacy_theme

Feat/legacy theme

packages/vchart-theme/src/index.ts

@@ -1,2 +1,3 @@
 export * from './v-screen';
+export * from './legacy';
 export * from './theme-map';

packages/vchart-theme/src/legacy/index.ts

@@ -0,0 +1,23 @@
+import { colorLegend } from './legend/color-legend';
+import { sizeLegend } from './legend/size-legend';
+import type { ITheme } from '@visactor/vchart-types';
+
+export const legacyLightTheme: ITheme = {
+  name: 'legacyLight',
+  description: 'legacy light theme for simply legend style',
+  type: 'light',
+  component: {
+    sizeLegend,
+    colorLegend
+  }
+};
+
+export const legacyDarkTheme: ITheme = {
+  name: 'legacyDark',
+  description: 'legacy dark theme for simply legend style',
+  type: 'dark',
+  component: {
+    sizeLegend,
+    colorLegend
+  }
+};

packages/vchart-theme/src/legacy/legend/color-legend.ts

@@ -0,0 +1,37 @@
+import type { IColorLegendTheme, IContinuousLegendTheme } from '@visactor/vchart-types';
+import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous';
+
+const handlerTheme: IContinuousLegendTheme['handler'] = {
+  style: {
+    symbolType: 'circle',
+    lineWidth: 4,
+    outerBorder: { distance: 2, lineWidth: 1, stroke: '#ccc' },
+    size: 10,
+    stroke: '#fff'
+  }
+};
+
+export const colorLegend: IColorLegendTheme = {
+  horizontal: {
+    ...DEFAULT_CONTINUOUS_LEGEND_THEME,
+    rail: {
+      width: 200,
+      height: 8,
+      style: {
+        fill: 'rgba(0,0,0,0.04)'
+      }
+    },
+    handler: handlerTheme
+  },
+  vertical: {
+    ...DEFAULT_CONTINUOUS_LEGEND_THEME,
+    rail: {
+      width: 8,
+      height: 200,
+      style: {
+        fill: 'rgba(0,0,0,0.04)'
+      }
+    },
+    handler: handlerTheme
+  }
+};

packages/vchart-theme/src/legacy/legend/continuous.ts

@@ -0,0 +1,41 @@
+import type { IContinuousLegendTheme } from '@visactor/vchart-types';
+
+export const DEFAULT_CONTINUOUS_LEGEND_THEME: IContinuousLegendTheme = {
+  orient: 'right',
+  position: 'middle',
+  padding: 30,
+  title: {
+    visible: false,
+    padding: 0,
+    textStyle: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      fill: { type: 'palette', key: 'titleFontColor' }
+    },
+    space: 12
+  },
+  handler: {
+    visible: true
+  },
+  startText: {
+    style: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      fill: { type: 'palette', key: 'labelFontColor' }
+    }
+  },
+  endText: {
+    style: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      fill: { type: 'palette', key: 'labelFontColor' }
+    }
+  },
+  handlerText: {
+    style: {
+      fontSize: 14,
+      fontWeight: 'normal',
+      fill: { type: 'palette', key: 'labelFontColor' }
+    }
+  }
+};

packages/vchart-theme/src/legacy/legend/index.ts

@@ -0,0 +1,2 @@
+export { colorLegend as legacyColorLegendTheme } from './color-legend';
+export { sizeLegend as legacySizeLegendTheme } from './size-legend';

packages/vchart-theme/src/legacy/legend/size-legend.ts

@@ -0,0 +1,104 @@
+// eslint-disable-next-line no-duplicate-imports
+import type { IContinuousLegendTheme, ISizeLegendTheme } from '@visactor/vchart-types';
+import { DEFAULT_CONTINUOUS_LEGEND_THEME } from './continuous';
+
+const getHandlerTheme = (align?: 'top' | 'bottom' | 'left' | 'right'): IContinuousLegendTheme['handler'] => ({
+  style: {
+    symbolType: getSizeHandlerPath(align),
+    fill: '#fff',
+    lineWidth: 1,
+    size: 10,
+    stroke: '#ccc',
+    outerBorder: false
+  }
+});
+
+export const sizeLegend: ISizeLegendTheme = {
+  horizontal: {
+    ...DEFAULT_CONTINUOUS_LEGEND_THEME,
+    sizeBackground: {
+      fill: '#cdcdcd'
+    },
+    track: {
+      style: {
+        fill: 'rgba(20,20,20,0.1)'
+      }
+    },
+    rail: {
+      width: 200,
+      height: 4,
+      style: {
+        fill: 'rgba(0,0,0,0.04)'
+      }
+    },
+    handler: getHandlerTheme('top')
+  },
+  vertical: {
+    ...DEFAULT_CONTINUOUS_LEGEND_THEME,
+    sizeBackground: {
+      fill: '#cdcdcd'
+    },
+    track: {
+      style: {
+        fill: 'rgba(20,20,20,0.1)'
+      }
+    },
+    rail: {
+      width: 4,
+      height: 200,
+      style: {
+        fill: 'rgba(0,0,0,0.04)'
+      }
+    },
+    handler: getHandlerTheme('right')
+  }
+};
+
+export function getSizeHandlerPath(align: 'top' | 'bottom' | 'left' | 'right' = 'bottom') {
+  let centerX = 0;
+  const centerY = 0;
+  const upperHalf = 3.5;
+  const leftHalf = 2.5;
+  const arrowY = 6;
+
+  if (align === 'top') {
+    return `
+    M${centerX},${centerY - arrowY}L${centerX - upperHalf},${centerY - leftHalf}
+    v${2 * leftHalf}
+    h${2 * upperHalf}
+    v${-2 * leftHalf}
+    Z
+`;
+  }
+
+  if (align === 'left') {
+    centerX = 1;
+    return `
+    M${centerX - arrowY},${centerY}L${centerX - arrowY + leftHalf},${centerY - upperHalf}
+    h${2 * leftHalf}
+    v${2 * upperHalf}
+    h${-2 * leftHalf}
+    Z
+`;
+  }
+
+  if (align === 'right') {
+    centerX = -1;
+
+    return `
+    M${centerX + arrowY},${centerY}L${centerX + arrowY - leftHalf},${centerY - upperHalf}
+    h${-2 * leftHalf}
+    v${2 * upperHalf}
+    h${2 * leftHalf}
+    Z
+  `;
+  }
+
+  return `
+    M${centerX},${centerY + arrowY}L${centerX - upperHalf},${centerY + leftHalf}
+    v${-2 * leftHalf}
+    h${2 * upperHalf}
+    v${2 * leftHalf}
+    Z
+`;
+}

packages/vchart-theme/src/theme-map.ts

@@ -1,8 +1,12 @@
 import type { ITheme } from '@visactor/vchart-types';
 import { vScreenThemeList } from './v-screen';
+import { legacyDarkTheme, legacyLightTheme } from './legacy';
 
 export const allThemeMap = new Map([
   // 大屏主题
-  ...([...vScreenThemeList].map(theme => [theme.name, theme]) as [string, ITheme][])
+  ...([...vScreenThemeList].map(theme => [theme.name, theme]) as [string, ITheme][]),
+  // 传统主题
+  [legacyLightTheme.name, legacyLightTheme],
+  [legacyDarkTheme.name, legacyDarkTheme]
   // new theme here
 ]) as Map<string, ITheme>;