shkim4
db0bfe2d34
Add HMSolidPieChart and HMSolidDonutChart: a tilted, SVG-drawn disc with an outer wall and, for the donut, an inner wall seen through the hole. Same data, slice angles, order, legend and tooltip as the 2D charts; the tooltip is the same on the top face and the walls and follows the pointer. The existing 2D charts and their props are unchanged. - Side walls use darker HM tokens (--hm-chart-1-side .. --hm-chart-5-side) and a color-mix darkening for custom colors; shared chart tokens are untouched. - Add a "입체형" example to the Pie Chart and Donut Chart stories (PieSolidExample, DonutSolidExample); ExampleCard description is now optional. - Document usage and constraints in the chart package README.
160 lines
5.9 KiB
CSS
160 lines
5.9 KiB
CSS
/* Chart mapping: the shadcn/ui Chart (Recharts) wired to the HM Theme. HM has no separate chart spec yet, so series colors are
|
|
derived from existing HM palette Semantic tokens (green / brown / warm neutral); no HEX value is defined here.
|
|
Requires @hm-design/ui/theme.css (the --hm-sem-* tokens). Runtime Theme overrides of the palette flow through these aliases. */
|
|
:root, [data-hm-theme] {
|
|
/* Series order alternates green and brown so neighbouring series stay distinguishable (bar, line and donut slices). */
|
|
--hm-chart-1: var(--hm-sem-palette-green-light-2);
|
|
--hm-chart-2: var(--hm-sem-palette-brown-light-2);
|
|
--hm-chart-3: var(--hm-sem-palette-green-light-3);
|
|
--hm-chart-4: var(--hm-sem-palette-brown-light-4);
|
|
--hm-chart-5: var(--hm-sem-palette-warm-neutral-mid);
|
|
|
|
/* Light end of a stacked segment: the next palette step(s) lighter in the same family as the series color.
|
|
Brown Light 4 is the lightest brown token, so series 4 keeps its own color (a flat segment) instead of borrowing another family. */
|
|
--hm-chart-1-light: var(--hm-sem-palette-green-light-3);
|
|
--hm-chart-2-light: var(--hm-sem-palette-brown-light-3);
|
|
--hm-chart-3-light: var(--hm-sem-palette-green-light-4);
|
|
--hm-chart-4-light: var(--hm-sem-palette-brown-light-4);
|
|
--hm-chart-5-light: var(--hm-sem-palette-warm-neutral-light);
|
|
|
|
/* Side walls of the solid (thick) pie and donut: the next palette step darker in the same family as the series color. */
|
|
--hm-chart-1-side: var(--hm-sem-palette-green-light-1);
|
|
--hm-chart-2-side: var(--hm-sem-palette-brown-light-1);
|
|
--hm-chart-3-side: var(--hm-sem-palette-green-light-2);
|
|
--hm-chart-4-side: var(--hm-sem-palette-brown-light-3);
|
|
--hm-chart-5-side: var(--hm-sem-palette-warm-neutral-dark);
|
|
|
|
--hm-chart-tooltip-background: var(--hm-sem-bg-surface);
|
|
--hm-chart-tooltip-border-color: var(--hm-sem-stroke-default);
|
|
--hm-chart-tooltip-radius: var(--hm-radius-container);
|
|
--hm-chart-tooltip-shadow: var(--hm-sem-floating-shadow);
|
|
--hm-chart-tooltip-text: var(--hm-sem-fg-primary);
|
|
--hm-chart-tooltip-label: var(--hm-sem-fg-secondary);
|
|
--hm-chart-grid-color: var(--hm-sem-stroke-default);
|
|
--hm-chart-axis-text: var(--hm-sem-fg-secondary);
|
|
--hm-chart-center-value: var(--hm-sem-fg-primary);
|
|
--hm-chart-font-family: var(--hm-font-family-base);
|
|
}
|
|
|
|
[data-slot="chart"] {
|
|
font-family: var(--hm-chart-font-family);
|
|
/* The container may sit in a flex row or a narrow card: let it shrink instead of overflowing. */
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
[data-slot="chart"] .recharts-cartesian-axis-tick text {
|
|
fill: var(--hm-chart-axis-text);
|
|
}
|
|
[data-slot="chart"] .recharts-cartesian-grid line {
|
|
stroke: var(--hm-chart-grid-color);
|
|
stroke-opacity: 0.6;
|
|
}
|
|
|
|
[data-slot="chart-tooltip-content"] {
|
|
border: 1px solid var(--hm-chart-tooltip-border-color);
|
|
border-radius: var(--hm-chart-tooltip-radius);
|
|
background: var(--hm-chart-tooltip-background);
|
|
color: var(--hm-chart-tooltip-text);
|
|
box-shadow: var(--hm-chart-tooltip-shadow);
|
|
}
|
|
[data-slot="chart-tooltip-content"] .text-muted-foreground {
|
|
color: var(--hm-chart-tooltip-label);
|
|
}
|
|
|
|
[data-slot="chart-legend-content"] {
|
|
color: var(--hm-chart-tooltip-label);
|
|
}
|
|
|
|
/* Donut center total. */
|
|
[data-slot="chart-center-value"] {
|
|
fill: var(--hm-chart-center-value);
|
|
font-size: 24px;
|
|
font-weight: var(--hm-font-weight-bold);
|
|
}
|
|
[data-slot="chart-center-label"] {
|
|
fill: var(--hm-chart-axis-text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* "Sample data" marker used by the @hm-design/chart/examples entry. */
|
|
[data-slot="chart-sample-notice"] {
|
|
color: var(--hm-chart-axis-text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Horizontal bar chart labels. The item name sits on a gradient that starts at 30% of the series color, so the dark text gets
|
|
a light halo (the card surface) to stay readable from the faint left end to the opaque right end. */
|
|
:root, [data-hm-theme] {
|
|
--hm-chart-bar-name-text: var(--hm-sem-fg-primary);
|
|
--hm-chart-bar-name-halo: var(--hm-sem-bg-surface);
|
|
--hm-chart-bar-value-text: var(--hm-sem-fg-primary);
|
|
}
|
|
[data-slot="chart-bar-name"],
|
|
[data-slot="chart-bar-value"] {
|
|
font-size: 12px;
|
|
font-weight: var(--hm-font-weight-medium);
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="chart-bar-name"] {
|
|
fill: var(--hm-chart-bar-name-text);
|
|
stroke: var(--hm-chart-bar-name-halo);
|
|
stroke-width: 3px;
|
|
stroke-linejoin: round;
|
|
paint-order: stroke;
|
|
}
|
|
[data-slot="chart-bar-value"] {
|
|
fill: var(--hm-chart-bar-value-text);
|
|
}
|
|
/* Name of a bar too short to hold it: shown after the value on the card surface, so it uses the secondary text color. */
|
|
[data-slot="chart-bar-outside-name"] {
|
|
fill: var(--hm-chart-axis-text);
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* 0 line of the positive / negative bar chart: clearly darker than the regular gridlines. */
|
|
:root, [data-hm-theme] {
|
|
--hm-chart-zero-line: var(--hm-sem-fg-secondary);
|
|
}
|
|
|
|
/* Value label above a line chart Dot; its color is set per point (series color or the point's own color). */
|
|
[data-slot="chart-point-label"] {
|
|
font-size: 12px;
|
|
font-weight: var(--hm-font-weight-medium);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Pie: outside "name value" labels, value labels inside slices, and the ring key of the stacked pie. */
|
|
[data-slot="chart-pie-label"] {
|
|
fill: var(--hm-chart-axis-text);
|
|
font-size: 12px;
|
|
pointer-events: none;
|
|
}
|
|
[data-slot="chart-slice-label"] {
|
|
fill: var(--hm-chart-bar-name-text);
|
|
stroke: var(--hm-chart-bar-name-halo);
|
|
stroke-width: 3px;
|
|
stroke-linejoin: round;
|
|
paint-order: stroke;
|
|
font-size: 12px;
|
|
font-weight: var(--hm-font-weight-medium);
|
|
pointer-events: none;
|
|
}
|
|
/* Radar: custom axis names. */
|
|
[data-slot="chart-axis-label"] {
|
|
fill: var(--hm-chart-axis-text);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Radial: item names curved along the start of each bar. The halo keeps the text readable on pale bar colors. */
|
|
.hm-radial-name {
|
|
fill: var(--hm-chart-bar-name-text);
|
|
stroke: var(--hm-chart-bar-name-halo);
|
|
stroke-width: 2px;
|
|
stroke-linejoin: round;
|
|
paint-order: stroke;
|
|
font-size: 11px;
|
|
font-weight: var(--hm-font-weight-medium);
|
|
pointer-events: none;
|
|
}
|