@tsingroc/tsingroc-components 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/deckgl/WeatherData.ts

@@ -1,157 +0,0 @@
-import type * as wl from "weatherlayers-gl";
-import type { BitmapBoundingBox } from "@deck.gl/layers";
-
-export interface WeatherData {
-  dims: {
-    longitude: number;
-    latitude: number;
-    time: number;
-  };
-  coords: {
-    /** deg */
-    longitude: number[];
-    /** deg */
-    latitude: number[];
-    /** Unix 时间戳 */
-    time: number[];
-  };
-  data_vars: {
-    /** ℃ */
-    temperature_2m?: number[][][];
-    /** hPa */
-    surface_pressure?: number[][][];
-    /** % */
-    cloud_cover?: number[][][];
-    /** ℃ */
-    dew_point_2m?: number[][][];
-    /** % */
-    relative_humidity_2m?: number[][][];
-    /** 风速沿纬线向**东**吹（西风）的分量，m/s */
-    wind_component_u_10m?: number[][][];
-    /** 风速沿经线向**北**吹（南风）的分量，m/s */
-    wind_component_v_10m?: number[][][];
-    /** m/s */
-    wind_speed_10m?: number[][][];
-    /** deg，`0` 表示**北风**（往南吹），随着角度增大，风向**顺时针**旋转。*/
-    wind_direction_10m?: number[][][];
-    /** mm */
-    rain?: number[][][];
-  };
-}
-
-export const getBounds = (data: WeatherData): BitmapBoundingBox => {
-  const [lngMin, lngMax] = [
-    data.coords.longitude[0],
-    data.coords.longitude.at(-1) as number,
-  ].sort();
-  const [latMin, latMax] = [
-    data.coords.latitude[0],
-    data.coords.latitude.at(-1) as number,
-  ].sort();
-  return [lngMin, latMin, lngMax, latMax];
-};
-
-export function extractScalarData(
-  data: WeatherData,
-  variable: keyof WeatherData["data_vars"],
-) {
-  const result = Array.from({ length: data.dims.time }, () => ({
-    image: {
-      data: new Float32Array(data.dims.longitude * data.dims.latitude),
-      width: data.dims.longitude,
-      height: data.dims.latitude,
-    } satisfies wl.TextureData as wl.TextureData,
-    min: Infinity,
-    max: -Infinity,
-    mean: 0,
-  }));
-  let p = 0;
-  for (let i = 0; i < data.dims.longitude; i++) {
-    for (let j = 0; j < data.dims.latitude; j++) {
-      for (let t = 0; t < data.dims.time; t++) {
-        let value = (data.data_vars[variable] as number[][][])[i][j][t];
-        if (value === -9999) value = NaN;
-        result[t].image.data[p] = value;
-        if (value > result[t].max) result[t].max = value;
-        if (value < result[t].min) result[t].min = value;
-      }
-      p++;
-    }
-  }
-  for (const item of result) {
-    item.mean =
-      (item.image.data as Float32Array).reduce((a, b) => a + b) /
-      item.image.data.length;
-  }
-  return result;
-}
-
-export function extractVectorData(
-  data: WeatherData,
-  variableU: keyof WeatherData["data_vars"],
-  variableV: keyof WeatherData["data_vars"],
-) {
-  const result = Array.from(
-    { length: data.dims.time },
-    () =>
-      ({
-        data: new Float32Array(data.dims.longitude * data.dims.latitude * 2),
-        width: data.dims.longitude,
-        height: data.dims.latitude,
-      }) satisfies wl.TextureData as wl.TextureData,
-  );
-  let p = 0;
-  for (let i = 0; i < data.dims.longitude; i++) {
-    for (let j = 0; j < data.dims.latitude; j++) {
-      for (let t = 0; t < data.dims.time; t++) {
-        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
-        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
-        if (u === -9999) u = NaN;
-        if (v === -9999) v = NaN;
-        result[t].data[p] = u;
-        result[t].data[p + 1] = v;
-      }
-      p += 2;
-    }
-  }
-  return result;
-}
-
-export function extractMagnitudeData(
-  data: WeatherData,
-  variableU: keyof WeatherData["data_vars"],
-  variableV: keyof WeatherData["data_vars"],
-) {
-  const result = Array.from({ length: data.dims.time }, () => ({
-    image: {
-      data: new Float32Array(data.dims.longitude * data.dims.latitude),
-      width: data.dims.longitude,
-      height: data.dims.latitude,
-    } satisfies wl.TextureData as wl.TextureData,
-    min: Infinity,
-    max: -Infinity,
-    mean: 0,
-  }));
-  let p = 0;
-  for (let i = 0; i < data.dims.longitude; i++) {
-    for (let j = 0; j < data.dims.latitude; j++) {
-      for (let t = 0; t < data.dims.time; t++) {
-        let u = (data.data_vars[variableU] as number[][][])[i][j][t];
-        let v = (data.data_vars[variableV] as number[][][])[i][j][t];
-        if (u === -9999) u = NaN;
-        if (v === -9999) v = NaN;
-        const value = Math.sqrt(u * u + v * v);
-        result[t].image.data[p] = value;
-        if (value > result[t].max) result[t].max = value;
-        if (value < result[t].min) result[t].min = value;
-      }
-      p++;
-    }
-  }
-  for (const item of result) {
-    item.mean =
-      (item.image.data as Float32Array).reduce((a, b) => a + b) /
-      item.image.data.length;
-  }
-  return result;
-}

package/src/deckgl/index.ts

@@ -1,4 +0,0 @@
-export {
-  default as TiandituLayer,
-  type TiandituLayerProps,
-} from "./TiandituLayer";

package/src/echarts/coordinateSystems/grid.ts

@@ -1,143 +0,0 @@
-import type {
-  BarSeriesOption,
-  BoxplotSeriesOption,
-  FlowGLSeriesOption,
-  GridComponentOption,
-  LineSeriesOption,
-  XAXisComponentOption,
-  YAXisComponentOption,
-} from "echarts";
-import { useId } from "react";
-
-import type { EChartsComponent, EChartsSeries } from "..";
-
-export type GridPreset = (
-  grid: GridComponentOption,
-  xAxis: XAXisComponentOption,
-  yAxis: YAXisComponentOption,
-) => void;
-
-export interface GridOption {
-  /**
-   * 坐标网格的其它设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#grid
-   */
-  option?: GridComponentOption;
-  /**
-   * X 轴的设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#xAxis
-   */
-  xAxis?: XAXisComponentOption;
-  /**
-   * Y 轴的设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#yAxis
-   */
-  yAxis?: YAXisComponentOption;
-  /**
-   * 预设列表。预设的优先级**高于**上述设置。
-   *
-   * 可用的预设：{@linkcode minimalGrid}
-   */
-  presets?: GridPreset[];
-  /** 要绘制在该坐标系上的系列。*/
-  series?: EChartsSeries<
-    | LineSeriesOption
-    | BarSeriesOption
-    | BoxplotSeriesOption
-    | FlowGLSeriesOption
-  >[];
-}
-
-/**
- * 添加一个直角坐标系。X 轴和 Y 轴的数据类型默认值与 ECharts 原版一致。
- */
-export function grid(option: GridOption): EChartsComponent {
-  const grid: GridComponentOption = {
-    left: 0,
-    right: 0,
-    top: 24,
-    bottom: 0,
-    containLabel: true,
-    ...option.option,
-  };
-  const xAxis: XAXisComponentOption = {
-    id: grid.id === undefined ? undefined : String(grid.id) + "x",
-    gridId: grid.id === undefined ? undefined : String(grid.id),
-    nameGap: 6,
-    ...option.xAxis,
-    nameTextStyle: { fontWeight: "bold", ...option.xAxis?.nameTextStyle },
-    axisTick: {
-      alignWithLabel: true,
-      ...option.xAxis?.axisTick,
-      // 此处需要强转，因为 alignWithLabel 仅当 boundaryGap = true 时有效，但无效也没有影响
-    } as XAXisComponentOption["axisTick"],
-  };
-  const xAxisId = xAxis.id as string;
-  const yAxis = {
-    id: grid.id === undefined ? undefined : String(grid.id) + "y",
-    type: "value",
-    gridId: grid.id === undefined ? undefined : String(grid.id),
-    nameGap: 10,
-    ...option.yAxis,
-    nameTextStyle: {
-      align: "left",
-      fontWeight: "bold",
-      ...option.yAxis?.nameTextStyle,
-    },
-  } as YAXisComponentOption;
-  const yAxisId = yAxis.id as string;
-  option.presets?.forEach((preset) => preset(grid, xAxis, yAxis));
-  return {
-    grid: [grid],
-    xAxis: [xAxis],
-    yAxis: [yAxis],
-    series: option.series
-      ?.flatMap((item) => item.series)
-      .map((series) => ({
-        ...series,
-        coordinateSystem: "cartesian2d",
-        xAxisId,
-        yAxisId,
-      })),
-  };
-}
-
-/**
- * 添加一个直角坐标系。X 轴和 Y 轴的数据类型默认值与 ECharts 原版一致。
- *
- * **注意**：该组件是一个 React hook，需要遵守正常使用 hook 的准则。
- */
-export function useGrid(option: GridOption): EChartsComponent {
-  return grid({
-    ...option,
-    option: {
-      id: useId(),
-      ...option.option,
-    },
-  });
-}
-
-const MINIMAL_GRID: GridPreset = (grid, xAxis, yAxis) => {
-  grid.top = 0;
-  xAxis.show = false;
-  if (
-    (xAxis.type === undefined && (xAxis as { data?: [] }).data !== undefined) ||
-    xAxis.type === "category"
-  ) {
-    (xAxis as { boundaryGap: boolean }).boundaryGap = false;
-  } else {
-    xAxis.min = "dataMin";
-    xAxis.max = "dataMax";
-  }
-  xAxis.axisLabel = { inside: true };
-  yAxis.show = false;
-  yAxis.axisLabel = { inside: true };
-};
-
-/** 使用该预设可以隐藏直角坐标系的坐标轴和网格线，只留下图像本身，并且使其填满整个容器。*/
-export function minimalGrid() {
-  return MINIMAL_GRID;
-}

package/src/echarts/coordinateSystems/polar.ts

@@ -1,148 +0,0 @@
-import type {
-  AngleAxisComponentOption,
-  BarSeriesOption,
-  LineSeriesOption,
-  PolarComponentOption,
-  RadiusAxisComponentOption,
-} from "echarts";
-import { useId } from "react";
-
-import type { EChartsComponent, EChartsSeries } from "..";
-
-export type PolarPreset = (
-  polar: PolarComponentOption,
-  angleAxis: AngleAxisComponentOption,
-  radiusAxis: RadiusAxisComponentOption,
-) => void;
-
-export interface PolarOption {
-  /**
-   * 极坐标系的其它设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#polar
-   */
-  option?: PolarComponentOption;
-  /**
-   * 角度轴的设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#angleAxis
-   */
-  angleAxis?: AngleAxisComponentOption;
-  /**
-   * 半径轴的设置，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option.html#radiusAxis
-   */
-  radiusAxis?: RadiusAxisComponentOption;
-  /**
-   * 预设列表。预设的优先级**高于**上述设置。
-   *
-   * 可用的预设：{@linkcode minimalGrid}
-   */
-  presets?: PolarPreset[];
-  /** 要绘制在该坐标系上的系列。*/
-  series?: EChartsSeries<LineSeriesOption | BarSeriesOption>[];
-}
-
-/**
- * 添加一个极坐标系。角度轴和半径轴的数据类型默认值与 ECharts 原版一致。
- */
-export function polar(option: PolarOption): EChartsComponent {
-  const polar: PolarComponentOption = option.option ?? {};
-  const angleAxis = {
-    id: polar.id === undefined ? undefined : String(polar.id) + "angle",
-    polarId: polar.id === undefined ? undefined : String(polar.id),
-    ...option.angleAxis,
-    axisLabel: {
-      margin: 3,
-      fontSize: 10,
-      ...option.angleAxis?.axisLabel,
-    },
-    axisLine: {
-      show: false,
-      ...option.angleAxis?.axisLine,
-    },
-    splitLine: {
-      show: true,
-      ...option.angleAxis?.splitLine,
-    },
-  } as AngleAxisComponentOption;
-  const angleAxisId = angleAxis.id as string;
-  const radiusAxis = {
-    id: polar.id === undefined ? undefined : String(polar.id) + "radius",
-    type: "value",
-    polarId: polar.id === undefined ? undefined : String(polar.id),
-    ...option.radiusAxis,
-    axisLine: {
-      show: false,
-      ...option.radiusAxis?.axisLine,
-    },
-  } as RadiusAxisComponentOption;
-  const radiusAxisId = radiusAxis.id as string;
-  option.presets?.forEach((preset) => preset(polar, angleAxis, radiusAxis));
-  return {
-    polar: [polar],
-    angleAxis: [angleAxis],
-    radiusAxis: [radiusAxis],
-    series: option.series
-      ?.flatMap((item) => item.series)
-      .map((series) => ({
-        ...series,
-        coordinateSystem: "polar",
-        angleAxisId,
-        radiusAxisId,
-      })),
-  };
-}
-
-/**
- * 添加一个极坐标系。角度轴和半径轴的数据类型默认值与 ECharts 原版一致。
- *
- * **注意**：该组件是一个 React hook，需要遵守正常使用 hook 的准则。
- */
-export function usePolar(option: PolarOption): EChartsComponent {
-  return polar({
-    ...option,
-    option: {
-      id: useId(),
-      ...option.option,
-    },
-  });
-}
-
-const WIND_POLAR: PolarPreset = (_, angleAxis, radiusAxis) => {
-  angleAxis.type = "category";
-  (angleAxis as AngleAxisComponentOption & { data: readonly string[] }).data =
-    WIND_DIRECTION_NAMES;
-  angleAxis.startAngle = 101.25;
-  radiusAxis.axisLabel = {
-    ...radiusAxis.axisLabel,
-    verticalAlign: "top",
-  };
-};
-
-/**
- * 使用该预设可以将极坐标系的角度轴设置为 16 个风向，风向从正北开始，按顺时针方向排列。
- */
-export function windPolar(): PolarPreset {
-  return WIND_POLAR;
-}
-
-const WIND_DIRECTION_NAMES = [
-  "N",
-  "NNE",
-  "NE",
-  "ENE",
-  "E",
-  "ESE",
-  "SE",
-  "SSE",
-  "S",
-  "SSW",
-  "SW",
-  "WSW",
-  "W",
-  "WNW",
-  "NW",
-  "NNW",
-] as const;

package/src/echarts/gl.ts

@@ -1,159 +0,0 @@
-import type { FlowGLSeriesOption as OrigFlowGLSeriesOption } from "echarts";
-import type {
-  ComponentOption,
-  SeriesOnCartesianOptionMixin,
-  SeriesOnGeoOptionMixin,
-} from "echarts/types/src/util/types.js";
-
-import "echarts-gl";
-
-import type { EChartsSeries } from ".";
-
-// 由于官方没有提供类型定义，这里只能自行补充
-declare module "echarts/types/dist/echarts" {
-  interface RegisteredSeriesOption {
-    flowGL: FlowGLSeriesOption;
-  }
-  interface FlowGLSeriesOption
-    extends ComponentOption,
-      SeriesOnCartesianOptionMixin,
-      SeriesOnGeoOptionMixin {
-    type: "flowGL";
-    /**
-     * 粒子的密度，实际的粒子数量是设置数目的平方。粒子密度越大迹线效果越好，但是性能开销也会越大。
-     * 除了该属性，使用 `particleType` 也可以得到更加清晰连贯的迹线。
-     * @default 128
-     */
-    particleDensity?: number;
-    /**
-     * 粒子的类型，可以设置为点 `"point"` 或线 `"line"`。
-     * 线类型的粒子会用一条线连接上个运动的位置和当前运动的位置，这会让这个轨迹更加连贯。
-     * @default "point"
-     */
-    particleType?: "point" | "line";
-    /**
-     * 粒子的大小，如果 `particleType == "line"` 则代表线宽。
-     * @default 1
-     */
-    particleSize?: number;
-    /**
-     * 粒子的速度，默认为 1。注意在 `particleType` 为 `"point"` 的时候过大的速度会让整个轨迹变得断断续续。
-     * @default 1
-     */
-    particleSpeed?: number;
-    /**
-     * 粒子的轨迹长度，数值越大轨迹越长。
-     * @default 2
-     */
-    particleTrail?: number;
-    /**
-     * 画面的超采样比率，采用 4 的超采样可以有效的提高画面的清晰度，减少画面锯齿。
-     * 但是因为需要处理更多的像素数量，所以也对性能有更高的要求。
-     * @default 1
-     */
-    supersampling?: number;
-    /**
-     * 传入的网格数据的网格宽度数量。
-     * @default "auto"
-     */
-    gridWidth?: number | "auto";
-    /**
-     * 传入的网格数据的网格高度数量。
-     * @default "auto"
-     */
-    gridHeight?: number | "auto";
-    /**
-     * 每行数据包含四个值，分别表示位置 x、y，速度 sx、sy。
-     * 如果使用地理坐标系，则分别表示位置 lng、lat，速度 sLng、sLat。
-     */
-    data: [number, number, number, number][];
-    /**
-     * 向量场迹线的样式。
-     */
-    itemStyle?: FlowGLSeriesItemStyle;
-  }
-  interface FlowGLSeriesItemStyle {
-    /**
-     * 向量场迹线的颜色。
-     * @default "#fff"
-     */
-    color?: string;
-    /**
-     * 向量场迹线的透明度。
-     * @default 0.8
-     */
-    opacity?: number;
-  }
-}
-
-export interface FlowGLSeriesOption {
-  /** 系列名称，不可与其他系列重名。*/
-  name: string;
-  /**
-   * 每行数据包含四个值，分别表示位置 x、y，速度 sx、sy。
-   *
-   * 如果需要使用风场数据，可以直接调用 {@linkcode preprocessWindData} 来将数据处理成此处需要的格式。
-   */
-  data: [number, number, number, number][];
-  /**
-   * 其它需要添加到系列上的选项，参见 [ECharts 文档][1]。
-   *
-   * [1]: https://echarts.apache.org/zh/option-gl.html#series-flowGL
-   */
-  option?: Partial<OrigFlowGLSeriesOption>;
-}
-
-/**
- * 在坐标系上绘制一个流场。
- *
- * 推荐使用以下坐标系配置：
- *
- * ```ts
- * echarts.useGrid({
- *   xAxis: { type: "value" },
- *   yAxis: { min: "dataMin", max: "dataMax" },
- *   presets: [echarts.minimalGrid()],
- * })
- * ```
- */
-export function flowGLSeries(
-  option: FlowGLSeriesOption,
-): EChartsSeries<OrigFlowGLSeriesOption> {
-  return {
-    series: [
-      {
-        type: "flowGL",
-        id: option.name,
-        name: option.name,
-        data: option.data,
-        particleDensity: 20,
-        particleSize: 3,
-        supersampling: window.devicePixelRatio,
-        ...option.option,
-      },
-    ],
-  };
-}
-
-export interface WindData {
-  /** 位置，由空格分隔的经纬度数字组成。*/
-  location: string;
-  /** 风向，单位是角度（deg），`0` 表示**东风**，随着角度增大，风向**顺时针**旋转。*/
-  wind_direction_80m: number;
-  /** 风速。*/
-  wind_speed_80m: number;
-}
-
-/** 将 JSON 格式的天气数据预处理成 FlowGL 接受的格式。*/
-export function preprocessWindData(
-  data: WindData[],
-): [number, number, number, number][] {
-  return data.map((item) => {
-    const [x, y] = item.location.split(" ").map(Number.parseFloat);
-    // prettier-ignore
-    const sx = -Math.cos(item.wind_direction_80m * (Math.PI / 180)) * item.wind_speed_80m;
-    // prettier-ignore
-    const sy = +Math.sin(item.wind_direction_80m * (Math.PI / 180)) * item.wind_speed_80m;
-    return [x, y, sx, sy];
-  });
-}