Refactor/chart view

.eslintrc.json

@@ -1,7 +1,9 @@
 {
   "extends": "@1stg/eslint-config/loose",
   "rules": {
-    "regexp/strict": "off"
+    "regexp/strict": "off",
+    "@typescript-eslint/no-unsafe-call": "off",
+    "@typescript-eslint/no-unsafe-argument": "off"
   },
   "overrides": [
     {

.gitignore

@@ -5,4 +5,4 @@ lib
 .type-coverage
 .vercel
 .*cache
-*.tsbuildinfo
+*.tsbuildinfo

.storybook/main.ts

@@ -12,6 +12,7 @@ export const addons = [
   '@storybook/addon-links',
   '@storybook/addon-essentials',
   '@storybook/preset-scss',
+  'storybook-dark-mode'
 ];
 
 export const core = {

.stylelintignore

@@ -5,4 +5,4 @@ LICENSE
 *.json
 *.sh
 *.tsbuildinfo
-*.lock
+*.lock

.stylelintrc

@@ -1,13 +1,6 @@
 {
   "extends": "@1stg/stylelint-config/loose",
   "rules": {
-    "scss/function-no-unknown": [
-      true,
-      {
-        "ignoreFunctions": [
-          "use-rgb"
-        ]
-      }
-    ]
+    "rule-empty-line-before": null
   }
 }

docs/chart.md

@@ -0,0 +1,148 @@
+# Chart
+
+> 用于提供创建 svg、自适应图表大小等配置, 继承于 View，有着 View 的 api
+
+## 职责
+
+- 设置主题
+- 初始化 interaction
+- 图表宽高自适应事件绑定
+- destroy
+
+持续更新...
+![alauda-chart](./alauda-chart.svg)
+
+## 结构
+
+```
+chart
+├─ README.md
+├─ docs // 文档
+├─ package.json
+├─ src
+│  ├─ chart
+│  │  ├─ event-emitter.ts
+│  │  ├─ index.ts // 图表 chart view 容器
+│  │  └─ view.ts // 视图 view
+│  ├─ components // 图表相关组件
+│  │  ├─ annotation.ts // 标注
+│  │  ├─ axis.ts // 坐标轴
+│  │  ├─ base.ts // 组件抽象类
+│  │  ├─ coordinate.ts // 坐标系
+│  │  ├─ header.ts
+│  │  ├─ index.ts // 注册组件相关
+│  │  ├─ legend.ts // 图例
+│  │  ├─ scale.ts // 比例尺 度量
+│  │  ├─ shape // 图形
+│  │  │  ├─ area.ts // 面积
+│  │  │  ├─ bar.ts // 柱状图
+│  │  │  ├─ gauge.ts // 计量图
+│  │  │  ├─ index.ts // 图形注册等相关
+│  │  │  ├─ line.ts // 线图
+│  │  │  ├─ pie.ts // 饼图
+│  │  │  └─ point.ts // 点图
+│  │  ├─ styles.ts // 组件公共样式
+│  │  ├─ title.ts // 标题
+│  │  └─ tooltip.ts // 工具提示
+│  ├─ index.ts // 图表base 注册组件、图形、等
+│  ├─ interaction // 交互
+│  │  ├─ action // 交互动作
+│  │  │  ├─ action.ts // action 基类
+│  │  │  ├─ brush-x.ts // x 框选
+│  │  │  ├─ element.ts // 元素激活
+│  │  │  ├─ index.ts // 注册 action 相关
+│  │  │  ├─ legend.ts // 图例切换
+│  │  │  └─ tooltip.ts // 图例展示隐藏
+│  │  ├─ index.ts // 注册交互动作相关
+│  │  └─ interaction.ts // 交互
+│  ├─ reactivity // 响应式 option
+│  ├─ strategy // uplot internal策略
+│  │  ├─ abstract.ts // 抽象类
+│  │  ├─ config.ts // 默认配置文件
+│  │  ├─ index.ts
+│  │  ├─ internal-strategy.ts // 内置策略  d3 渲染图表
+│  │  ├─ manage.ts // 策略管理
+│  │  ├─ quadtree.ts // uplot 使用 Quadtree组件
+│  │  ├─ uplot-strategy.ts // uplot 策略 uplot 渲染图表
+│  │  └─ utils.ts // 工具函数
+│  ├─ theme // 主题
+│  │  ├─ dark.ts // 深色主题
+│  │  ├─ index.ts
+│  │  └─ light.ts // 浅色主题
+│  ├─ types // 类型文件
+│  └─ utils // 工具函数
+├─ stories // demo
+├─ tsconfig.json
+└─ yarn.lock
+```
+
+## Api
+
+> 命令式：同时支持 options 配置
+
+```ts
+const chart = new Chart({
+  container: 'chart',
+  data: [],
+  options: Options, // 所有配置集合
+});
+
+// 设置图标宽高 根据容器大小动态更新
+chart.changeSize({ width, height });
+
+// 命令式
+chart.data([]);
+chart.title(option);
+chart.legend(option);
+```
+
+## Option
+
+```ts
+interface ChartOption {
+  // 绘制的 DOM 可以是 DOM select  也可以是 DOM 实例
+  container: string | HTMLElement;
+  // 图表宽高度 不设置默认根据父容器高度自适应
+  width?: number;
+  height?: number;
+  // 图表内边距 上 右 下 左  不包含 header
+  padding?: Padding; // [16,0,0,0]
+  // 默认交互 ['tooltip', 'legend-filter', 'legend-active']
+  defaultInteractions?: string[];
+  // 图表组件等相关的配置。同时支持配置式 和 声明式
+  options: Options;
+  /** 主题 */
+  theme?: Theme; // 默认根据系统
+}
+
+// 具体图表设置
+interface Options {
+  // 只读所有配置反应在次类型上
+  readonly padding?: Padding;
+  readonly data?: Data;
+
+  title?: TitleOption; // 图表标题
+  legend?: LegendOption; // 图例
+  tooltip?: TooltipOption; // 工具提示
+
+  scale?: {
+    // 度量｜比例尺 将数据映射像素上
+    x?: ScaleOption;
+    y?: ScaleOption;
+  };
+  axis?: {
+    // x y 坐标轴
+    x?: AxisOption;
+    y?: AxisOption;
+  };
+  coordinate?: CoordinateOption; // 坐标系 (将不同类型图表统一配置)
+  annotation?: AnnotationOption; // 标注 xLine yLine
+  // shape 相关
+  line?: LineShapeOption; // 线
+  area?: AreaShapeOption; // 面积图
+  bar?: BarShapeOption; // 柱状图
+  point?: PointShapeOption; // 点图
+  pie?: PieShapeOption; // 饼图
+  gauge?: GaugeShapeOption; // 计量图
+}
+```

docs/components/annotation.md

@@ -0,0 +1,46 @@
+# Annotation
+
+> 标注 在图表上标识额外的标记注解， 暂时只支持 lineX lineY
+
+## Api
+
+```ts
+chart.annotation().lineX(options); // 命令式
+chart.annotation().lineY(options);
+
+new Chart({ annotation: { lineX: options, lineY: options } }); // 配置式
+```
+
+## Option
+
+```ts
+export interface AnnotationOption {
+  lineX?: AnnotationLineOption;
+  lineY?: AnnotationLineOption;
+}
+
+export interface AnnotationLineOption {
+  data: string | number; // x y 坐标数据
+  text?: {
+    // 不设置则默认展示 data
+    position?: 'left' | 'right' | string; // 文本位置
+    content: unknown; // 文本
+    style?: object; // 样式
+    border?: {
+      // 文本边框样式
+      style?: string;
+      padding?: [number, number];
+    };
+  };
+  style?: {
+    // 样式
+    stroke?: string;
+    width?: number;
+    lineDash?: [number, number];
+  };
+}
+```
+
+## Todo
+
+- [ ] 支持用户自定义 annotation

docs/components/axis.md

@@ -0,0 +1,20 @@
+# Axis
+
+> 坐标轴
+
+## Api
+
+```ts
+chart.axis('x' | 'y', option); // 命令式
+
+new Chart({ axis: { x: options, y: options } }); // 配置式
+```
+
+## Option
+
+```ts
+export interface AxisOpt {
+  autoSize?: boolean; // 默认 true  y 坐标轴生效，根据 label 长度自动偏移图表
+  formatter?: string | ((value: string | number) => string); // 格式化
+}
+```

docs/components/coordinate.md

@@ -0,0 +1,23 @@
+# Coordinate
+
+> 坐标系
+
+## Api
+
+```ts
+chart.coordinate(option); // 命令式
+
+new Chart({ coordinate: options }); // 配置式
+```
+
+## Option
+
+```ts
+export interface CoordinateOpt {
+  transposed?: boolean; //  x y 轴置换
+}
+```
+
+## Todo
+
+- [ ] 支持多种坐标系类型 例如 极坐标系(pie) polar 极坐标系的配置例如 startAngel endAngel 等

docs/components/legend.md

@@ -0,0 +1,32 @@
+# Legend
+
+## Api
+
+```ts
+chart.legend(boolean | options); // 命令式
+
+new Chart({ legend: options }); // 配置式
+```
+
+## Option
+
+```ts
+type LegendPosition =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right';
+
+interface LegendOption {
+  custom?: boolean; // 预留自定义dom 用于业务覆盖
+  position?: LegendPosition; // 图例位置
+}
+```
+
+## Todo
+
+- [ ] 自定义图例 custom 通过 fn 方式暴露，不支持让业务操作 dom set
+
+- [ ] legend icon 支持根据不同图表类型展示不同样式

docs/components/scale.md

@@ -0,0 +1,25 @@
+# Scale
+
+> 度量 比例尺 用于定义域范围类型等
+
+## Api
+
+```ts
+chart.scale('x' | 'y', option); // 命令式
+
+new Chart({ scale: { x: options, y: options } }); // 配置式
+```
+
+## Option
+
+```ts
+export interface ScaleOption {
+  time?: boolean; // true
+  min?: number; // 最小值
+  max?: number; // 最大值
+}
+```
+
+## Todo
+
+- [ ] tickCount 指定 tick 个数