@cardenelabs/cdl 0.40.8 → 0.40.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/CHANGELOG.md +48 -1
  2. package/dist/index.cjs +114 -81
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +114 -81
  5. package/dist/index.js.map +1 -1
  6. package/dist/react.cjs +114 -81
  7. package/dist/react.cjs.map +1 -1
  8. package/dist/react.js +114 -81
  9. package/dist/react.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/kinds/chart-stat.tsx +98 -29
package/dist/index.js CHANGED
@@ -25227,7 +25227,9 @@ function ChartStatNode({
25227
25227
  const y0 = node.cy - node.h / 2;
25228
25228
  const data = resolveChartData(node.chartData ?? [], stateValues);
25229
25229
  const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
25230
- const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
25230
+ const \u524D\u3092\u51FA\u3059 = data.some((d) => d.previous !== void 0);
25231
+ const \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length, \u524D\u3092\u51FA\u3059);
25232
+ const \u5272\u5408\u3092\u51FA\u3059 = data.length > 1;
25231
25233
  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
25232
25234
  /* @__PURE__ */ jsx(
25233
25235
  "rect",
@@ -25249,109 +25251,140 @@ function ChartStatNode({
25249
25251
  const \u8272 = \u5370\u306E\u8272(d.tone, idx);
25250
25252
  const \u6570\u5024 = \u5B9F\u5024\u8868\u8A18(d.value);
25251
25253
  const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
25252
- return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
25253
- idx > 0 && /* @__PURE__ */ jsx(
25254
- "line",
25255
- {
25256
- "data-cdl-role": "chart-stat-divider",
25257
- x1: 0,
25258
- y1: \u533A\u753B.\u4F59\u767D,
25259
- x2: 0,
25260
- y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
25261
- stroke: "var(--cdl-divider, #d4d4d8)",
25262
- strokeWidth: 1
25263
- }
25264
- ),
25265
- /* @__PURE__ */ jsx(
25266
- "text",
25267
- {
25268
- "data-cdl-role": "chart-stat-label",
25269
- x: \u67A02.w / 2,
25270
- y: \u533A\u753B.\u540D\u524D\u306Ey,
25271
- fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
25272
- fontWeight: 700,
25273
- textAnchor: "middle",
25274
- fill: "var(--cdl-text-dim, #5a6270)",
25275
- children: d.label
25276
- }
25277
- ),
25278
- /* @__PURE__ */ jsx(
25279
- "text",
25280
- {
25281
- "data-cdl-role": "chart-stat-value",
25282
- "data-cdl-unresolved": d.unresolved ? "true" : void 0,
25283
- x: \u67A02.w / 2,
25284
- y: \u533A\u753B.\u6570\u5024\u306Ey,
25285
- fontSize: \u6570\u5024\u306E\u7D1A,
25286
- fontWeight: 700,
25287
- textAnchor: "middle",
25288
- fill: \u8272,
25289
- children: \u6570\u5024
25290
- }
25291
- ),
25292
- /* @__PURE__ */ jsx(
25293
- "circle",
25294
- {
25295
- "data-cdl-role": "chart-stat-track",
25296
- cx: \u67A02.w / 2,
25297
- cy: \u533A\u753B.\u5F27\u306Ey,
25298
- r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
25299
- fill: "none",
25300
- stroke: "var(--cdl-divider, #d4d4d8)",
25301
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25302
- strokeOpacity: 0.5
25303
- }
25304
- ),
25305
- frac > 0 && /* @__PURE__ */ jsx(
25306
- "path",
25307
- {
25308
- "data-cdl-role": "chart-stat-arc",
25309
- d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
25310
- fill: "none",
25311
- stroke: \u8272,
25312
- strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25313
- strokeLinecap: "round"
25314
- }
25315
- ),
25316
- /* @__PURE__ */ jsx(
25317
- "text",
25318
- {
25319
- "data-cdl-role": "chart-stat-share",
25320
- x: \u67A02.w / 2,
25321
- y: \u533A\u753B.\u5272\u5408\u306Ey,
25322
- fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
25323
- textAnchor: "middle",
25324
- fill: "var(--cdl-text-dim, #5a6270)",
25325
- children: \u5272\u5408\u8868\u8A18(frac)
25326
- }
25327
- )
25328
- ] }, `stat-${idx}`);
25254
+ return /* @__PURE__ */ jsxs(
25255
+ "g",
25256
+ {
25257
+ "data-cdl-role": "chart-stat-item",
25258
+ transform: `translate(${\u67A02.x} ${\u67A02.y})`,
25259
+ children: [
25260
+ idx > 0 && /* @__PURE__ */ jsx(
25261
+ "line",
25262
+ {
25263
+ "data-cdl-role": "chart-stat-divider",
25264
+ x1: 0,
25265
+ y1: \u533A\u753B.\u4F59\u767D,
25266
+ x2: 0,
25267
+ y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
25268
+ stroke: "var(--cdl-divider, #d4d4d8)",
25269
+ strokeWidth: 1
25270
+ }
25271
+ ),
25272
+ /* @__PURE__ */ jsx(
25273
+ "text",
25274
+ {
25275
+ "data-cdl-role": "chart-stat-label",
25276
+ x: \u67A02.w / 2,
25277
+ y: \u533A\u753B.\u540D\u524D\u306Ey,
25278
+ fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
25279
+ fontWeight: 700,
25280
+ textAnchor: "middle",
25281
+ fill: "var(--cdl-text-dim, #5a6270)",
25282
+ children: d.label
25283
+ }
25284
+ ),
25285
+ /* @__PURE__ */ jsx(
25286
+ "text",
25287
+ {
25288
+ "data-cdl-role": "chart-stat-value",
25289
+ "data-cdl-unresolved": d.unresolved ? "true" : void 0,
25290
+ x: \u67A02.w / 2,
25291
+ y: \u533A\u753B.\u6570\u5024\u306Ey,
25292
+ fontSize: \u6570\u5024\u306E\u7D1A,
25293
+ fontWeight: 700,
25294
+ textAnchor: "middle",
25295
+ fill: \u8272,
25296
+ children: \u6570\u5024
25297
+ }
25298
+ ),
25299
+ d.previous !== void 0 && /* @__PURE__ */ jsx(
25300
+ "text",
25301
+ {
25302
+ "data-cdl-role": "chart-stat-previous",
25303
+ "data-cdl-unresolved": d.unresolved ? "true" : void 0,
25304
+ x: \u67A02.w / 2,
25305
+ y: \u533A\u753B.\u524D\u306Ey,
25306
+ fontSize: \u53CE\u3081\u308B\u7D1A(
25307
+ `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`,
25308
+ \u67A02.w - \u533A\u753B.\u4F59\u767D * 2,
25309
+ \u533A\u753B.\u524D\u306E\u7D1A,
25310
+ 8
25311
+ ),
25312
+ textAnchor: "middle",
25313
+ fill: "var(--cdl-text-dim, #5a6270)",
25314
+ children: `\u524D ${\u5B9F\u5024\u8868\u8A18(d.previous)}`
25315
+ }
25316
+ ),
25317
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsx(
25318
+ "circle",
25319
+ {
25320
+ "data-cdl-role": "chart-stat-track",
25321
+ cx: \u67A02.w / 2,
25322
+ cy: \u533A\u753B.\u5F27\u306Ey,
25323
+ r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
25324
+ fill: "none",
25325
+ stroke: "var(--cdl-divider, #d4d4d8)",
25326
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25327
+ strokeOpacity: 0.5
25328
+ }
25329
+ ),
25330
+ \u5272\u5408\u3092\u51FA\u3059 && frac > 0 && /* @__PURE__ */ jsx(
25331
+ "path",
25332
+ {
25333
+ "data-cdl-role": "chart-stat-arc",
25334
+ d: \u5F27\u306E\u90533(\u67A02.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
25335
+ fill: "none",
25336
+ stroke: \u8272,
25337
+ strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
25338
+ strokeLinecap: "round"
25339
+ }
25340
+ ),
25341
+ \u5272\u5408\u3092\u51FA\u3059 && /* @__PURE__ */ jsx(
25342
+ "text",
25343
+ {
25344
+ "data-cdl-role": "chart-stat-share",
25345
+ x: \u67A02.w / 2,
25346
+ y: \u533A\u753B.\u5272\u5408\u306Ey,
25347
+ fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
25348
+ textAnchor: "middle",
25349
+ fill: "var(--cdl-text-dim, #5a6270)",
25350
+ children: \u5272\u5408\u8868\u8A18(frac)
25351
+ }
25352
+ )
25353
+ ]
25354
+ },
25355
+ `stat-${idx}`
25356
+ );
25329
25357
  })
25330
25358
  ] });
25331
25359
  }
25332
- function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570) {
25360
+ function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570, \u524D\u3092\u51FA\u3059) {
25333
25361
  const \u4F59\u767D = 20;
25334
25362
  const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
25335
25363
  const \u540D\u524D\u306E\u7D1A = 14;
25336
25364
  const \u6570\u5024\u306E\u7D1A = 40;
25365
+ const \u524D\u306E\u7D1A = \u540D\u524D\u306E\u7D1A;
25337
25366
  const \u5272\u5408\u306E\u7D1A = 12;
25338
25367
  const \u5F27\u306E\u534A\u5F84 = 20;
25339
25368
  const \u5F27\u306E\u592A\u3055 = 4;
25340
- const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
25369
+ const \u524D\u306E\u9AD8\u3055 = \u524D\u3092\u51FA\u3059 ? 8 + \u524D\u306E\u7D1A : 0;
25370
+ const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
25341
25371
  const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
25342
25372
  const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
25343
25373
  const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
25344
- const \u5F27\u306Ey = \u6570\u5024\u306Ey + 16 + \u5F27\u306E\u534A\u5F84;
25374
+ const \u524D\u306Ey = \u6570\u5024\u306Ey + 8 + \u524D\u306E\u7D1A;
25375
+ const \u5F27\u306Ey = \u6570\u5024\u306Ey + \u524D\u306E\u9AD8\u3055 + 16 + \u5F27\u306E\u534A\u5F84;
25345
25376
  const \u5272\u5408\u306Ey = \u5F27\u306Ey + \u5F27\u306E\u534A\u5F84 + 8 + \u5272\u5408\u306E\u7D1A;
25346
25377
  return {
25347
25378
  \u4F59\u767D,
25348
25379
  \u540D\u524D\u306E\u7D1A,
25349
25380
  \u6570\u5024\u306E\u7D1A,
25381
+ \u524D\u306E\u7D1A,
25350
25382
  \u5272\u5408\u306E\u7D1A,
25351
25383
  \u5F27\u306E\u534A\u5F84,
25352
25384
  \u5F27\u306E\u592A\u3055,
25353
25385
  \u540D\u524D\u306Ey,
25354
25386
  \u6570\u5024\u306Ey,
25387
+ \u524D\u306Ey,
25355
25388
  \u5F27\u306Ey,
25356
25389
  \u5272\u5408\u306Ey,
25357
25390
  \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })