sketchmark 0.2.2 → 0.2.3
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.
- package/README.md +4 -4
- package/dist/ast/types.d.ts +1 -1
- package/dist/index.cjs +13 -13
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +13 -13
- package/dist/index.js.map +1 -1
- package/dist/renderer/roughChart.d.ts +1 -1
- package/dist/scene/index.d.ts +1 -1
- package/dist/sketchmark.iife.js +13 -13
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -848,7 +848,7 @@ function parse(src) {
|
|
|
848
848
|
kind: "chart",
|
|
849
849
|
id,
|
|
850
850
|
chartType: chartType.replace("-chart", ""),
|
|
851
|
-
|
|
851
|
+
label: props.label ?? props.title,
|
|
852
852
|
data: { headers, rows },
|
|
853
853
|
width: props.width ? parseFloat(props.width) : undefined,
|
|
854
854
|
height: props.height ? parseFloat(props.height) : undefined,
|
|
@@ -1340,7 +1340,7 @@ function buildSceneGraph(ast) {
|
|
|
1340
1340
|
return {
|
|
1341
1341
|
id: c.id,
|
|
1342
1342
|
chartType: c.chartType,
|
|
1343
|
-
|
|
1343
|
+
label: c.label,
|
|
1344
1344
|
data: c.data,
|
|
1345
1345
|
style: { ...ast.styles[c.id], ...themeStyle, ...c.style },
|
|
1346
1346
|
x: 0,
|
|
@@ -2075,7 +2075,7 @@ const CHART_COLORS = [
|
|
|
2075
2075
|
'#7F77DD', '#D4537E', '#639922', '#E24B4A',
|
|
2076
2076
|
];
|
|
2077
2077
|
function chartLayout(c) {
|
|
2078
|
-
const titleH = c.
|
|
2078
|
+
const titleH = c.label ? 24 : 8;
|
|
2079
2079
|
const padL = 44, padR = 12, padB = 28, padT = 6;
|
|
2080
2080
|
const pw = c.w - padL - padR;
|
|
2081
2081
|
const ph = c.h - titleH - padT - padB;
|
|
@@ -2263,17 +2263,17 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
|
|
|
2263
2263
|
...(s.strokeDash ? { strokeLineDash: s.strokeDash } : {}),
|
|
2264
2264
|
}));
|
|
2265
2265
|
// Title
|
|
2266
|
-
if (c.
|
|
2267
|
-
cg.appendChild(mkT(c.
|
|
2266
|
+
if (c.label) {
|
|
2267
|
+
cg.appendChild(mkT(c.label, c.x + c.w / 2, c.y + 14, cFontSize, cFontWeight, lc, 'middle', cFont));
|
|
2268
2268
|
}
|
|
2269
2269
|
const { px, py, pw, ph, cx, cy } = chartLayout(c);
|
|
2270
2270
|
// ── Pie / Donut ──────────────────────────────────────────
|
|
2271
2271
|
if (c.chartType === 'pie' || c.chartType === 'donut') {
|
|
2272
2272
|
const { segments, total } = parsePie(c.data);
|
|
2273
|
-
const r = Math.min(c.w * 0.38, (c.h - (c.
|
|
2273
|
+
const r = Math.min(c.w * 0.38, (c.h - (c.label ? 24 : 8)) * 0.44);
|
|
2274
2274
|
const ir = c.chartType === 'donut' ? r * 0.48 : 0;
|
|
2275
2275
|
const legendX = c.x + 8;
|
|
2276
|
-
const legendY = c.y + (c.
|
|
2276
|
+
const legendY = c.y + (c.label ? 28 : 12);
|
|
2277
2277
|
let angle = -Math.PI / 2;
|
|
2278
2278
|
for (const seg of segments) {
|
|
2279
2279
|
const sweep = (seg.value / total) * Math.PI * 2;
|
|
@@ -2311,7 +2311,7 @@ function renderRoughChartSVG(rc, c, palette, isDark) {
|
|
|
2311
2311
|
strokeWidth: 1.2,
|
|
2312
2312
|
}));
|
|
2313
2313
|
});
|
|
2314
|
-
legend(cg, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.
|
|
2314
|
+
legend(cg, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.label ? 28 : 12), lc, cFont);
|
|
2315
2315
|
return cg;
|
|
2316
2316
|
}
|
|
2317
2317
|
// ── Bar / Line / Area ─────────────────────────────────────
|
|
@@ -5758,23 +5758,23 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
|
|
|
5758
5758
|
...(s.strokeDash ? { strokeLineDash: s.strokeDash } : {}),
|
|
5759
5759
|
});
|
|
5760
5760
|
// Title
|
|
5761
|
-
if (c.
|
|
5761
|
+
if (c.label) {
|
|
5762
5762
|
ctx.save();
|
|
5763
5763
|
ctx.font = `${cFontWeight} ${cFontSize}px ${cFont}`;
|
|
5764
5764
|
ctx.fillStyle = lc;
|
|
5765
5765
|
ctx.textAlign = 'center';
|
|
5766
5766
|
ctx.textBaseline = 'middle';
|
|
5767
|
-
ctx.fillText(c.
|
|
5767
|
+
ctx.fillText(c.label, c.x + c.w / 2, c.y + 14);
|
|
5768
5768
|
ctx.restore();
|
|
5769
5769
|
}
|
|
5770
5770
|
const { px, py, pw, ph, cx, cy } = chartLayout(c);
|
|
5771
5771
|
// ── Pie / Donut ──────────────────────────────────────────
|
|
5772
5772
|
if (c.chartType === 'pie' || c.chartType === 'donut') {
|
|
5773
5773
|
const { segments, total } = parsePie(c.data);
|
|
5774
|
-
const r = Math.min(c.w * 0.38, (c.h - (c.
|
|
5774
|
+
const r = Math.min(c.w * 0.38, (c.h - (c.label ? 24 : 8)) * 0.44);
|
|
5775
5775
|
const ir = c.chartType === 'donut' ? r * 0.48 : 0;
|
|
5776
5776
|
const legendX = c.x + 8;
|
|
5777
|
-
const legendY = c.y + (c.
|
|
5777
|
+
const legendY = c.y + (c.label ? 28 : 12);
|
|
5778
5778
|
let angle = -Math.PI / 2;
|
|
5779
5779
|
segments.forEach((seg, i) => {
|
|
5780
5780
|
const sweep = (seg.value / total) * Math.PI * 2;
|
|
@@ -5802,7 +5802,7 @@ function drawRoughChartCanvas(rc, ctx, c, pal, R) {
|
|
|
5802
5802
|
strokeWidth: 1.2,
|
|
5803
5803
|
});
|
|
5804
5804
|
});
|
|
5805
|
-
drawLegend(ctx, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.
|
|
5805
|
+
drawLegend(ctx, pts.map(p => p.label), CHART_COLORS, c.x + 8, c.y + (c.label ? 28 : 12), lc, cFont);
|
|
5806
5806
|
ctx.globalAlpha = 1;
|
|
5807
5807
|
return;
|
|
5808
5808
|
}
|