refactor: update chartist v1.0.0

package.json

@@ -12,7 +12,7 @@
     "@icon-park/vue-next": "^1.4.0",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^3.2.5",
-    "chartist": "^0.11.4",
+    "chartist": "^1.0.0",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
@@ -45,7 +45,6 @@
   "devDependencies": {
     "@commitlint/cli": "^12.0.0",
     "@commitlint/config-conventional": "^12.0.0",
-    "@types/chartist": "^0.11.0",
     "@types/clipboard": "^2.0.1",
     "@types/crypto-js": "^4.0.1",
     "@types/file-saver": "^2.0.1",

src/types/slides.ts

@@ -1,4 +1,4 @@
-import { IBarChartOptions, ILineChartOptions, IPieChartOptions } from 'chartist'
+import { BarChartOptions, LineChartOptions, PieChartOptions } from 'chartist'
 
 export const enum ShapePathFormulasKeys {
   ROUND_RECT = 'roundRect',
@@ -386,7 +386,7 @@ export interface PPTLineElement extends Omit<PPTBaseElement, 'height' | 'rotate'
 
 export type PresetChartType = 'bar' | 'horizontalBar' | 'line' | 'area' | 'scatter' | 'pie' | 'ring'
 export type ChartType = 'bar' | 'line' | 'pie'
-export type ChartOptions = ILineChartOptions & IBarChartOptions & IPieChartOptions
+export type ChartOptions = LineChartOptions & BarChartOptions & PieChartOptions
 export interface ChartData {
   labels: string[]
   legends: string[]

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -302,8 +302,6 @@ emitter.on(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
 onUnmounted(() => {
   emitter.off(EmitterEvents.OPEN_CHART_DATA_EDITOR, openDataEditor)
 })
-
-// handleElement: handleElement as Ref<PPTChartElement>,
 </script>
 
 <style lang="scss" scoped>

src/views/components/element/ChartElement/Chart.vue

@@ -28,17 +28,12 @@
 
 <script lang="ts" setup>
 import { computed, inject, onMounted, PropType, ref, watch } from 'vue'
-import { upperFirst } from 'lodash'
 import tinycolor from 'tinycolor2'
-import Chartist, {
-  IChartistLineChart,
-  IChartistBarChart,
-  IChartistPieChart,
-} from 'chartist'
+import { BarChart, LineChart, PieChart } from 'chartist'
 import { ChartData, ChartOptions, ChartType } from '@/types/slides'
 import { injectKeySlideScale } from '@/types/injectKey'
 
-import 'chartist/dist/scss/chartist.scss'
+import 'chartist/dist/index.css'
 
 const props = defineProps({
   width: {
@@ -79,30 +74,31 @@ const props = defineProps({
 const chartRef = ref<HTMLElement>()
 const slideScale = inject(injectKeySlideScale) || ref(1)
 
-let chart: IChartistLineChart | IChartistBarChart | IChartistPieChart | undefined
+let chart: LineChart | BarChart | PieChart | undefined
 
 const chartHeight = computed(() => {
   if (props.legend) return props.height - 20
   return props.height
 })
 
-const getDataAndOptions = () => {
+const getPieChartData = () => ({ ...props.data, series: props.data.series[0] })
+
+const getOptions = () => {
   const propsOptopns = props.options || {}
-  const options = {
+  return {
     ...propsOptopns,
     width: props.width * slideScale.value,
     height: chartHeight.value * slideScale.value,
   }
-  const data = props.type === 'pie' ? { ...props.data, series: props.data.series[0] } : props.data
-  return { data, options }
 }
 
 const renderChart = () => {
   if (!chartRef.value) return
 
-  const type = upperFirst(props.type)
-  const { data, options } = getDataAndOptions()
-  chart = new Chartist[type](chartRef.value, data, options)
+  const options = getOptions()
+  if (props.type === 'bar') chart = new BarChart(chartRef.value, props.data, options)
+  if (props.type === 'line') chart = new LineChart(chartRef.value, props.data, options)
+  if (props.type === 'pie') chart = new PieChart(chartRef.value, getPieChartData(), options)
 }
 
 const updateChart = () => {
@@ -110,7 +106,8 @@ const updateChart = () => {
     renderChart()
     return
   }
-  const { data, options } = getDataAndOptions()
+  const options = getOptions()
+  const data = props.type === 'pie' ? getPieChartData() : props.data
   chart.update(data, options)
 }