feat: revamp demo

demo/examples/ManualChart.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { use, registerMap } from "echarts/core";
 import { LinesChart } from "echarts/charts";
 import {
@@ -7,18 +7,42 @@ import {
   TooltipComponent,
 } from "echarts/components";
 import { shallowRef } from "vue";
+import type { InitOptions, LoadingOptions, Option } from "../../src/types";
 import VChart from "../../src/ECharts";
 import VExample from "./Example.vue";
 import worldMap from "../data/world.json";
+import { DEMO_TEXT_STYLE } from "../constants";
+import { isGeoJSONSource } from "../utils/geo";
 
 use([LinesChart, GeoComponent, TitleComponent, TooltipComponent]);
-registerMap("world", worldMap);
 
-const chart = shallowRef(null);
+const worldGeoJSON = isGeoJSONSource(worldMap) ? worldMap : null;
+
+if (worldGeoJSON) {
+  registerMap("world", worldGeoJSON);
+}
+
+type ChartInstance = InstanceType<typeof VChart>;
+
+interface FlightDataset {
+  airports: Array<[string, string, string, number, number]>;
+  routes: Array<[number, number, number, number]>;
+}
+
+function isFlightDataset(value: unknown): value is FlightDataset {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    Array.isArray((value as Record<string, unknown>).airports) &&
+    Array.isArray((value as Record<string, unknown>).routes)
+  );
+}
+
+const chart = shallowRef<ChartInstance | null>(null);
 const loading = shallowRef(false);
 const loaded = shallowRef(false);
 
-const loadingOptions = {
+const loadingOptions: LoadingOptions = {
   text: "",
   color: "#c23531",
   textColor: "rgba(255, 255, 255, 0.5)",
@@ -26,24 +50,36 @@ const loadingOptions = {
   zlevel: 0,
 };
 
-function load() {
+const initOptions: InitOptions = {
+  renderer: "canvas",
+};
+
+function load(): void {
   loaded.value = true;
   loading.value = true;
 
-  import("../data/flight.json").then(({ default: data }) => {
+  import("../data/flight.json").then(({ default: rawData }) => {
+    if (!isFlightDataset(rawData)) {
+      loading.value = false;
+      return;
+    }
+
     loading.value = false;
 
-    function getAirportCoord(idx) {
-      return [data.airports[idx][3], data.airports[idx][4]];
-    }
-    const routes = data.routes.map((airline) => {
-      return [getAirportCoord(airline[1]), getAirportCoord(airline[2])];
+    const getAirportCoord = (index: number): [number, number] => [
+      rawData.airports[index][3],
+      rawData.airports[index][4],
+    ];
+
+    type Route = [[number, number], [number, number]];
+    const routes = rawData.routes.map<Route>(([, from, to]) => {
+      const fromCoord = getAirportCoord(from);
+      const toCoord = getAirportCoord(to);
+      return [fromCoord, toCoord];
     });
 
-    chart.value.setOption({
-      textStyle: {
-        fontFamily: 'Inter, "Helvetica Neue", Arial, sans-serif',
-      },
+    chart.value?.setOption({
+      textStyle: { ...DEMO_TEXT_STYLE },
       title: {
         text: "World Flights",
         top: "5%",
@@ -54,11 +90,11 @@ function load() {
       },
       backgroundColor: "#003",
       tooltip: {
-        formatter(param) {
-          const route = data.routes[param.dataIndex];
-          return (
-            data.airports[route[1]][1] + " > " + data.airports[route[2]][1]
-          );
+        formatter({ dataIndex }: { dataIndex: number }) {
+          const route = rawData.routes[dataIndex];
+          const fromName = rawData.airports[route[1]][1];
+          const toName = rawData.airports[route[2]][1];
+          return `${fromName} > ${toName}`;
         },
       },
       geo: {
@@ -86,18 +122,19 @@ function load() {
           blendMode: "lighter",
         },
       ],
-    });
+    } satisfies Option);
   });
 }
 </script>
 
 <template>
-  <v-example id="manual" title="Manual updates">
-    <v-chart
+  <VExample id="manual" title="Manual updates">
+    <VChart
       ref="chart"
       autoresize
       :loading="loading"
       :loading-options="loadingOptions"
+      :init-options="initOptions"
       style="background-color: #003"
       manual-update
     />
@@ -110,5 +147,5 @@ function load() {
         <button :disabled="loaded" @click="load">Load</button>
       </p>
     </template>
-  </v-example>
+  </VExample>
 </template>