@astryx-vue/charts 0.0.0-stage → 0.1.0

package/package.json

@@ -1,6 +1,77 @@
 {
   "name": "@astryx-vue/charts",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Astryx charts for Vue — a config-model data visualization layer (d3-based).",
+  "author": "ShenQingchuan",
+  "license": "MIT",
+  "homepage": "https://astryx-vue.pages.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/astryx-vue/astryx-vue.git",
+    "directory": "packages/charts"
+  },
+  "bugs": "https://github.com/astryx-vue/astryx-vue/issues",
+  "keywords": [
+    "vue",
+    "vue3",
+    "design-system",
+    "astryx",
+    "charts",
+    "data-visualization"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./charts.css": {
+      "types": "./css.d.ts",
+      "default": "./charts.css"
+    },
+    "./styles/*.css": "./styles/*.css",
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "README.md",
+    "charts.css",
+    "css.d.ts",
+    "dist",
+    "styles"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "@astryx-vue/core": "^0.5.1"
+  },
+  "dependencies": {
+    "d3-scale": "4.0.2",
+    "d3-shape": "3.2.0"
+  },
+  "devDependencies": {
+    "@types/d3-scale": "4.0.9",
+    "@types/d3-shape": "3.1.8",
+    "@types/node": "26.6.4",
+    "@vue/compiler-sfc": "3.5.43",
+    "@vue/test-utils": "2.5.1",
+    "dom-accessibility-api": "0.7.1",
+    "tsdown": "0.23.0",
+    "typescript": "npm:@typescript/typescript6@6.0.2",
+    "unplugin-vue": "8.0.0",
+    "vue": "3.5.43",
+    "vue-tsc": "3.3.12",
+    "@astryx-vue/core": "^0.5.1"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
 }

package/styles/chart-axis.css

@@ -0,0 +1,15 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 轴线和短刻度线都跟正文同色，1px。 */
+  .astryx-chart-axis__line,
+  .astryx-chart-axis__mark {
+    stroke: var(--astryx-color-text-primary, #171717);
+    stroke-width: 1;
+  }
+
+  .astryx-chart-axis__label {
+    fill: var(--astryx-color-text-secondary, #525252);
+    font-size: 12px;
+  }
+}

package/styles/chart-grid.css

@@ -0,0 +1,9 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 网格线要比数据淡，用弱化的边框色，1px。 */
+  .astryx-chart-grid__line {
+    stroke: var(--astryx-color-border-emphasized, #d4d4d4);
+    stroke-width: 1;
+  }
+}

package/styles/chart-legend.css

@@ -0,0 +1,13 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 图例本身没有背景和边框；间距由 HStack / VStack 的 gap 给。 */
+  .astryx-chart-legend {
+    list-style: none;
+  }
+
+  /* 摆在图表两侧时贴着顶部，不然纵向列表会被拉高、项与项之间散开。 */
+  .astryx-chart-legend--vertical {
+    align-self: flex-start;
+  }
+}

package/styles/chart-swatch.css

@@ -0,0 +1,24 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 颜色由调用方从内联样式给（运行时的系列色），形状和尺寸固定在这里。 */
+  .astryx-chart-swatch {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  /* 柱状系列的色块：8×8 的圆角方块，两侧各留 1px。 */
+  .astryx-chart-swatch--square {
+    width: 8px;
+    height: 8px;
+    border-radius: 2px;
+    margin-inline: 1px;
+  }
+
+  /* 其余系列：一小段横线。 */
+  .astryx-chart-swatch--line {
+    width: 10px;
+    height: 3px;
+    border-radius: 1.5px;
+  }
+}

package/styles/chart-tooltip.css

@@ -0,0 +1,24 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 竖线用正文色，1px。 */
+  .astryx-chart-tooltip__crosshair {
+    stroke: var(--astryx-color-text-primary, #171717);
+    stroke-width: 1;
+  }
+
+  /* 卡片浮在图表之上，跟着指针走，所以不接收指针事件。 */
+  .astryx-chart-tooltip {
+    box-sizing: border-box;
+    position: fixed;
+    z-index: var(--astryx-chart-tooltip-z-index, 1000);
+    padding-block: var(--astryx-spacing-2, 8px);
+    padding-inline: var(--astryx-spacing-3, 12px);
+    background-color: var(--astryx-color-background-popover, #fff);
+    border: 1px solid var(--astryx-color-border, #e5e5e5);
+    border-radius: var(--astryx-radius-container, 8px);
+    box-shadow: var(--astryx-shadow-med, 0 4px 16px rgb(0 0 0 / 12%));
+    white-space: nowrap;
+    pointer-events: none;
+  }
+}

package/styles/chart.css

@@ -0,0 +1,45 @@
+@layer astryx.reset, astryx.tokens, astryx.base, astryx.components, astryx.overrides;
+
+@layer astryx.components {
+  /* 图表根撑满父容器宽度，高度由内联样式给（来自 height prop）。 */
+  .astryx-chart {
+    width: 100%;
+  }
+
+  /* 标题和副标题这一块，和下面的图表区之间留一个间距。 */
+  .astryx-chart__header {
+    margin-block-end: var(--astryx-spacing-4);
+  }
+
+  /* 图表区：图例和绘图区按图例位置排成一行或一列。 */
+  .astryx-chart__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--astryx-spacing-4);
+  }
+
+  /* 图例摆在左右两侧时改成横向排列。 */
+  .astryx-chart__body[data-legend-position='start'],
+  .astryx-chart__body[data-legend-position='end'] {
+    flex-direction: row;
+  }
+
+  /* 图例放在下面或右侧时排在绘图区之后。DOM 里图例始终在前，
+     这样图例内容变化不会影响绘图区的重排顺序。 */
+  .astryx-chart__body[data-legend-position='bottom'] > .astryx-chart__legend,
+  .astryx-chart__body[data-legend-position='end'] > .astryx-chart__legend {
+    order: 1;
+  }
+
+  /* 绘图区吃掉剩下的空间；宽度为 0 的容器量出 0 宽，所以这里必须挡住内容撑宽。 */
+  .astryx-chart__plot {
+    flex: 1;
+    min-width: 0;
+    overflow: clip;
+  }
+
+  /* 去掉 SVG 的行内基线空隙，高度完全由 height prop 决定。 */
+  .astryx-chart__plot > svg {
+    display: block;
+  }
+}