cats4u-charts 0.0.1

package/projects/charts-lib/src/lib/themes/default.ts

@@ -0,0 +1,377 @@
+import * as echarts from 'echarts';
+
+const defaultTheme = {
+  color: [
+    '#5470c6',
+    '#91cc75',
+    '#fac858',
+    '#ee6666',
+    '#73c0de',
+    '#3ba272',
+    '#fc8452',
+    '#9a60b4',
+    '#ea7ccc',
+  ],
+  backgroundColor: 'rgba(0, 0, 0, 0)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#464646',
+    },
+    subtextStyle: {
+      color: '#6E7079',
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1,
+    },
+    lineStyle: {
+      width: 2,
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1,
+    },
+    lineStyle: {
+      width: 2,
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc',
+    },
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#eb5454',
+      color0: '#47b262',
+      borderColor: '#eb5454',
+      borderColor0: '#47b262',
+      borderWidth: 1,
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+    lineStyle: {
+      width: 1,
+      color: '#aaa',
+    },
+    symbolSize: 4,
+    symbol: 'emptyCircle',
+    smooth: false,
+    color: [
+      '#5470c6',
+      '#91cc75',
+      '#fac858',
+      '#ee6666',
+      '#73c0de',
+      '#3ba272',
+      '#fc8452',
+      '#9a60b4',
+      '#ea7ccc',
+    ],
+    label: {
+      color: '#eee',
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: '#eee',
+      borderColor: '#444',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#000',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(100,0,0)',
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: '#eee',
+      borderColor: '#444',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#000',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: 'rgba(255,215,0,0.8)',
+        borderColor: '#444',
+        borderWidth: 1,
+      },
+      label: {
+        color: 'rgb(100,0,0)',
+      },
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+      },
+    },
+  },
+  logAxis: {
+    axisLine: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#E0E6F1'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+      },
+    },
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: '#6E7079',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#6E7079',
+    },
+    splitLine: {
+      show: false,
+      lineStyle: {
+        color: ['#E0E6F1'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.2)', 'rgba(210,219,238,0.2)'],
+      },
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#999',
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#666',
+      },
+    },
+  },
+  legend: {
+    textStyle: {
+      color: '#333',
+    },
+    left: 'center',
+    right: 'auto',
+    top: 0,
+    bottom: 10,
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#ccc',
+        width: 1,
+      },
+      crossStyle: {
+        color: '#ccc',
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: '#DAE1F5',
+      width: 2,
+    },
+    itemStyle: {
+      color: '#A4B1D7',
+      borderWidth: 1,
+    },
+    controlStyle: {
+      color: '#A4B1D7',
+      borderColor: '#A4B1D7',
+      borderWidth: 1,
+    },
+    checkpointStyle: {
+      color: '#316bf3',
+      borderColor: '#fff',
+    },
+    label: {
+      color: '#A4B1D7',
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#FFF',
+      },
+      controlStyle: {
+        color: '#A4B1D7',
+        borderColor: '#A4B1D7',
+        borderWidth: 1,
+      },
+      label: {
+        color: '#A4B1D7',
+      },
+    },
+  },
+  visualMap: {
+    color: ['#bf444c', '#d88273', '#f6efa6'],
+  },
+  markPoint: {
+    label: {
+      color: '#eee',
+    },
+    emphasis: {
+      label: {
+        color: '#eee',
+      },
+    },
+  },
+  grid: {
+    left: '10%',
+    right: '10%',
+    top: 60,
+    bottom: 70,
+  },
+};
+echarts.registerTheme('vintage', (defaultTheme as any).default ?? defaultTheme);

package/projects/charts-lib/src/lib/themes/essos.ts

@@ -0,0 +1,357 @@
+import * as echarts from 'echarts';
+
+const essosTheme = {
+  color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+  backgroundColor: 'rgba(242,234,191,0.15)',
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: '#893448',
+    },
+    subtextStyle: {
+      color: '#d95850',
+    },
+  },
+  line: {
+    itemStyle: {
+      borderWidth: '2',
+    },
+    lineStyle: {
+      width: '2',
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true,
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: '2',
+    },
+    lineStyle: {
+      width: '2',
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true,
+  },
+  bar: {
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: '#ccc',
+    },
+  },
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  boxplot: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+  },
+  candlestick: {
+    itemStyle: {
+      color: '#eb8146',
+      color0: 'transparent',
+      borderColor: '#d95850',
+      borderColor0: '#58c470',
+      borderWidth: '2',
+    },
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: '#ccc',
+    },
+    lineStyle: {
+      width: 1,
+      color: '#aaa',
+    },
+    symbolSize: '6',
+    symbol: 'emptyCircle',
+    smooth: true,
+    color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+    label: {
+      color: '#ffffff',
+    },
+  },
+  map: {
+    itemStyle: {
+      areaColor: '#f3f3f3',
+      borderColor: '#999999',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#893448',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: '#ffb248',
+        borderColor: '#eb8146',
+        borderWidth: 1,
+      },
+      label: {
+        color: '#893448',
+      },
+    },
+  },
+  geo: {
+    itemStyle: {
+      areaColor: '#f3f3f3',
+      borderColor: '#999999',
+      borderWidth: 0.5,
+    },
+    label: {
+      color: '#893448',
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: '#ffb248',
+        borderColor: '#eb8146',
+        borderWidth: 1,
+      },
+      label: {
+        color: '#893448',
+      },
+    },
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#999999',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  valueAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#999999',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#999999',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: '#aaaaaa',
+      },
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: '#333',
+      },
+    },
+    axisLabel: {
+      show: true,
+      color: '#999999',
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        color: ['#e6e6e6'],
+      },
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+      },
+    },
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: '#999',
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: '#666',
+      },
+    },
+  },
+  legend: {
+    textStyle: {
+      color: '#999999',
+    },
+    left: 'center',
+    right: 'auto',
+    top: 'auto',
+    bottom: 15,
+  },
+  tooltip: {
+    axisPointer: {
+      lineStyle: {
+        color: '#ccc',
+        width: 1,
+      },
+      crossStyle: {
+        color: '#ccc',
+        width: 1,
+      },
+    },
+  },
+  timeline: {
+    lineStyle: {
+      color: '#893448',
+      width: 1,
+    },
+    itemStyle: {
+      color: '#893448',
+      borderWidth: 1,
+    },
+    controlStyle: {
+      color: '#893448',
+      borderColor: '#893448',
+      borderWidth: 0.5,
+    },
+    checkpointStyle: {
+      color: '#eb8146',
+      borderColor: 'rgba(255,178,72,0.41)',
+    },
+    label: {
+      color: '#893448',
+    },
+    emphasis: {
+      itemStyle: {
+        color: '#ffb248',
+      },
+      controlStyle: {
+        color: '#893448',
+        borderColor: '#893448',
+        borderWidth: 0.5,
+      },
+      label: {
+        color: '#893448',
+      },
+    },
+  },
+  visualMap: {
+    color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', 'rgb(247,238,173)'],
+  },
+  markPoint: {
+    label: {
+      color: '#ffffff',
+    },
+    emphasis: {
+      label: {
+        color: '#ffffff',
+      },
+    },
+  },
+  grid: {
+    left: '15%',
+    right: '10%',
+    top: 65,
+    bottom: 80,
+  },
+};
+echarts.registerTheme('essos', (essosTheme as any).default ?? essosTheme);