Skip to content

Commit 723f5a9

Browse files
brc-ddbrc-dd
committed
fix suggestions
1 parent d73d2a3 commit 723f5a9

File tree

4 files changed

+54
-31
lines changed

4 files changed

+54
-31
lines changed

‎lib/components/SChartBar.vue

+21-17
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const props = withDefaults(defineProps<{
1010
data: KV[]
1111
colors?: ChartColor[]
1212
margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
13-
mode?: 'horizontal' | 'vertical'
13+
type?: 'horizontal' | 'vertical'
1414
debug?: boolean
1515
ticks?: number
1616
animate?: boolean
@@ -20,14 +20,16 @@ const props = withDefaults(defineProps<{
2020
yLabel?: string
2121
xLabelOffset?: number
2222
yLabelOffset?: number
23+
maxBandwidth?: number
2324
}>(), {
2425
colors: () => ['blue'],
25-
mode: 'vertical',
26+
type: 'vertical',
2627
debug: false,
2728
ticks: 5,
2829
animate: true,
2930
tooltip: true,
30-
tooltipFormat: (d: KV) => `${d.key} – ${d.value}`
31+
tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
32+
maxBandwidth: 100
3133
})
3234
3335
const chartRef = useTemplateRef('chart')
@@ -57,7 +59,7 @@ function renderChart({
5759
.remove()
5860
5961
// Set dimensions and margins
60-
const vertical = props.mode === 'vertical'
62+
const vertical = props.type === 'vertical'
6163
6264
const margin = {
6365
top: props.margins?.top ?? 30,
@@ -98,6 +100,8 @@ function renderChart({
98100
// Compute a constant offset to center the colored bar inside its full band.
99101
const groupOffset = (paddedScale.step() - paddedScale.bandwidth()) / 2
100102
const heightPadding = 24
103+
const bandwidth = Math.min(paddedScale.bandwidth(), props.maxBandwidth)
104+
const innerOffset = (paddedScale.bandwidth() - bandwidth) / 2
101105
102106
// For the axes, use the paddedScale so ticks remain centered on the bars.
103107
svg
@@ -106,7 +110,7 @@ function renderChart({
106110
.call(vertical ? d3.axisBottom(paddedScale) : d3.axisBottom(y).ticks(props.ticks))
107111
.selectAll('text')
108112
.attr('fill', c.text2)
109-
.style('font-size', '14px')
113+
.style('font-size', 'var(--chart-tick-font-size)')
110114
.style('text-anchor', 'middle')
111115
112116
// Remove X axis line
@@ -120,7 +124,7 @@ function renderChart({
120124
.call(vertical ? d3.axisLeft(y).ticks(props.ticks) : d3.axisLeft(paddedScale))
121125
.selectAll('text')
122126
.attr('fill', c.text2)
123-
.style('font-size', '14px')
127+
.style('font-size', 'var(--chart-tick-font-size)')
124128
125129
// Remove Y axis line
126130
svg
@@ -157,7 +161,7 @@ function renderChart({
157161
.attr('x', width / 2)
158162
.attr('y', height + xLabelOffset)
159163
.attr('fill', c.text2)
160-
.style('font-size', '14px')
164+
.style('font-size', 'var(--chart-label-font-size)')
161165
.style('text-anchor', 'middle')
162166
.html(props.xLabel)
163167
}
@@ -168,7 +172,7 @@ function renderChart({
168172
.attr('y', -yLabelOffset)
169173
.attr('transform', 'rotate(-90)')
170174
.attr('fill', c.text2)
171-
.style('font-size', '14px')
175+
.style('font-size', 'var(--chart-label-font-size)')
172176
.style('text-anchor', 'middle')
173177
.html(props.yLabel)
174178
}
@@ -207,9 +211,9 @@ function renderChart({
207211
.attr('width', paddedScale.step())
208212
.attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
209213
bars
210-
.attr('x', groupOffset)
214+
.attr('x', groupOffset + innerOffset)
211215
.attr('y', (d) => y(d.value))
212-
.attr('width', paddedScale.bandwidth())
216+
.attr('width', bandwidth)
213217
.attr('height', (d) => height - y(d.value))
214218
} else {
215219
outerBars
@@ -219,9 +223,9 @@ function renderChart({
219223
.attr('height', paddedScale.step())
220224
bars
221225
.attr('x', 0)
222-
.attr('y', groupOffset)
226+
.attr('y', groupOffset + innerOffset)
223227
.attr('width', (d) => y(d.value))
224-
.attr('height', paddedScale.bandwidth())
228+
.attr('height', bandwidth)
225229
}
226230
} else {
227231
// Animate the bars
@@ -237,9 +241,9 @@ function renderChart({
237241
.attr('y', (d) => Math.max(0, y(d.value) - heightPadding))
238242
.attr('height', (d) => height - Math.max(0, y(d.value) - heightPadding))
239243
bars
240-
.attr('x', groupOffset)
244+
.attr('x', groupOffset + innerOffset)
241245
.attr('y', height)
242-
.attr('width', paddedScale.bandwidth())
246+
.attr('width', bandwidth)
243247
.attr('height', 0)
244248
.transition()
245249
.duration(800)
@@ -258,9 +262,9 @@ function renderChart({
258262
.attr('width', (d) => Math.min(width, y(d.value) + heightPadding))
259263
bars
260264
.attr('x', 0)
261-
.attr('y', groupOffset)
265+
.attr('y', groupOffset + innerOffset)
262266
.attr('width', 0)
263-
.attr('height', paddedScale.bandwidth())
267+
.attr('height', bandwidth)
264268
.transition()
265269
.duration(800)
266270
.delay((_, i) => i * 100)
@@ -355,7 +359,7 @@ watch(
355359
background-color: var(--c-bg-elv-2);
356360
border: 1px solid var(--c-divider);
357361
border-radius: 6px;
358-
font-size: 12px;
362+
font-size: var(--chart-tooltip-font-size);
359363
}
360364
361365
:deep(.tick line) {

‎lib/components/SChartPie.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const props = withDefaults(defineProps<{
1111
colors?: ChartColor[]
1212
margins?: Partial<{ top: number; right: number; bottom: number; left: number }>
1313
innerRadius?: (outerRadius: number) => number
14-
mode?: 'pie' | 'donut'
14+
type?: 'pie' | 'donut'
1515
half?: boolean
1616
debug?: boolean
1717
animate?: boolean
@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<{
2525
labels?: boolean
2626
labelFormat?: (d: KV) => string
2727
}>(), {
28-
mode: 'donut',
28+
type: 'donut',
2929
half: false,
3030
debug: false,
3131
animate: true,
@@ -116,7 +116,7 @@ function renderChart({
116116
.enter()
117117
.append('g')
118118
.attr('transform', (d, i) => `translate(0,${i * 24})`)
119-
.style('font-size', '14px')
119+
.style('font-size', 'var(--chart-legend-font-size)')
120120
121121
// Add colored rectangles to the legend
122122
legend
@@ -163,7 +163,7 @@ function renderChart({
163163
// Calculate radius and center the chart
164164
const r_k = props.half ? 0.25 : 0.5
165165
const radius = Math.min(height_2, (width - legendWidth) / (2 + (props.legend ? r_k : 0)))
166-
const innerRadius = props.innerRadius?.(radius) ?? (props.mode === 'pie' ? 6 : Math.max(radius / 1.5, radius - 50))
166+
const innerRadius = props.innerRadius?.(radius) ?? (props.type === 'pie' ? 6 : Math.max(radius / 1.5, radius - 50))
167167
168168
legendGroup
169169
?.attr('transform', `translate(${radius * (1 + r_k)},${-(props.half ? height_2 : 0) / 2 - legendHeight / 2})`)
@@ -259,7 +259,7 @@ function renderChart({
259259
.attr('dy', '0.35em')
260260
.attr('fill', c.text2)
261261
.attr('text-anchor', (d) => leftOrRight(d) === 1 ? 'start' : 'end')
262-
.style('font-size', '14px')
262+
.style('font-size', 'var(--chart-label-font-size)')
263263
.html((d) => props.labelFormat(d.data))
264264
265265
if (animate) {
@@ -357,6 +357,6 @@ watch(
357357
background-color: var(--c-bg-elv-2);
358358
border: 1px solid var(--c-divider);
359359
border-radius: 6px;
360-
font-size: 12px;
360+
font-size: var(--chart-tooltip-font-size);
361361
}
362362
</style>

‎lib/styles/variables.css

+11
Original file line numberDiff line numberDiff line change
@@ -878,3 +878,14 @@
878878
--input-switch-disabled-toggle-color: var(--c-fg-gray-1);
879879
--input-switch-disabled-bg-color: var(--c-bg-mute-1);
880880
}
881+
882+
/**
883+
* Component: Charts
884+
* -------------------------------------------------------------------------- */
885+
886+
:root {
887+
--chart-tick-font-size: 14px;
888+
--chart-legend-font-size: 14px;
889+
--chart-label-font-size: 14px;
890+
--chart-tooltip-font-size: 12px;
891+
}

‎stories/components/SChart.01_Playground.story.vue

+16-8
Original file line numberDiff line numberDiff line change
@@ -39,21 +39,22 @@ function labelFormat(d: KV) {
3939
4040
function state() {
4141
return {
42-
barMode: 'vertical',
42+
barType: 'vertical',
4343
barDebug: false,
4444
barMarginTop: undefined,
4545
barMarginRight: undefined,
4646
barMarginBottom: undefined,
4747
barMarginLeft: undefined,
4848
barTicks: undefined,
49+
barMaxBandwidth: undefined,
4950
barAnimate: true,
5051
barTooltip: true,
5152
barXLabel: undefined,
5253
barYLabel: undefined,
5354
barXLabelOffset: undefined,
5455
barYLabelOffset: undefined,
5556
56-
pieMode: 'donut',
57+
pieType: 'donut',
5758
pieHalf: false,
5859
pieDebug: false,
5960
pieMarginTop: undefined,
@@ -75,9 +76,9 @@ function state() {
7576
<template #controls="{ state }">
7677
<div class="s-p-8 s-font-14 s-font-w-500">Bar Chart</div>
7778
<HstSelect
78-
title="mode"
79+
title="type"
7980
:options="['vertical', 'horizontal']"
80-
v-model="state.barMode"
81+
v-model="state.barType"
8182
/>
8283
<HstCheckbox
8384
title="debug"
@@ -113,6 +114,12 @@ function state() {
113114
:min="0"
114115
:max="20"
115116
/>
117+
<HstSlider
118+
title="max-bandwidth"
119+
v-model="state.barMaxBandwidth"
120+
:min="1"
121+
:max="100"
122+
/>
116123
<HstCheckbox
117124
title="animate"
118125
v-model="state.barAnimate"
@@ -143,12 +150,12 @@ function state() {
143150
/>
144151
<div class="s-p-8 s-font-14 s-font-w-500">Pie Chart</div>
145152
<HstSelect
146-
title="mode"
153+
title="type"
147154
:options="{
148155
donut: 'donut',
149156
pie: 'pie'
150157
}"
151-
v-model="state.pieMode"
158+
v-model="state.pieType"
152159
/>
153160
<HstCheckbox
154161
title="half"
@@ -241,7 +248,7 @@ function state() {
241248
bottom: state.barMarginBottom,
242249
left: state.barMarginLeft
243250
}"
244-
:mode="state.barMode"
251+
:type="state.barType"
245252
:debug="state.barDebug"
246253
:ticks="state.barTicks"
247254
:animate="state.barAnimate"
@@ -251,6 +258,7 @@ function state() {
251258
:y-label="state.barYLabel"
252259
:x-label-offset="state.barXLabelOffset"
253260
:y-label-offset="state.barYLabelOffset"
261+
:max-bandwidth="state.barMaxBandwidth"
254262
/>
255263
</div>
256264
</SCardBlock>
@@ -285,7 +293,7 @@ function state() {
285293
bottom: state.pieMarginBottom,
286294
left: state.pieMarginLeft
287295
}"
288-
:mode="state.pieMode"
296+
:type="state.pieType"
289297
:half="state.pieHalf"
290298
:debug="state.pieDebug"
291299
:animate="state.pieAnimate"

0 commit comments

Comments
 (0)