Skip to content

Commit

Permalink
feat(arc): Intent to ship arc.rangeText
Browse files Browse the repository at this point in the history 
Implement new arc.rangeText option, which can display
a range in Arc shape.

Ref naver#2120
  • Loading branch information
netil authored and netil committed Feb 13, 2024
1 parent b8e6aa7 commit be4aeba
Show file tree
Hide file tree
Showing 14 changed files with 727 additions and 84 deletions.
140 changes: 140 additions & 0 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5528,6 +5528,57 @@ setTimeout(function() {
]
}
],
DonutRangeText: [{
options: {
title: {
text: "Range text in 'absolute' value"
},
data: {
columns: [
["data1", 30],
["data2", 120],
["data3", 50]
],
type: "donut"
},
arc: {
rangeText: {
values: [15, 50, 70, 110, 160, 195],
unit: "absolute",
format: function(v) {
return v === 50 ? "Fifty" : v;
}
}
}
}
}, {
options: {
title: {
text: "Range text in 'percent' value"
},
data: {
columns: [
["data1", 30],
["data2", 120],
["data3", 50]
],
type: "donut"
},
arc: {
rangeText: {
values: [15, 25, 40, 50, 63, 70, 80, 99],
unit: "%",
position: function(v) {
if (v === 25) {
return {
y: -30
}
}
}
}
}
}
}],
LabelRatio: {
options: {
data: {
Expand Down Expand Up @@ -5896,6 +5947,95 @@ setTimeout(function() {
}
},
],
GaugeRangeText: [{
options: {
title: {
text: "Range text in 'absolute' value"
},
size: {
height: 220
},
data: {
columns: [
["data1", 30],
["data2", 120],
["data3", 50]
],
type: "gauge"
},
arc: {
rangeText: {
values: [15, 50, 70, 110, 160, 195],
unit: "absolute"
}
},
gauge: {
label: {
format: function(value, ratio) { return value; },
extents: function() { return ""; }
}
},

}
}, {
options: {
title: {
text: "Range text in 'percent' value"
},
size: {
height: 220
},
data: {
columns: [
["data1", 30],
["data2", 120],
["data3", 50]
],
type: "gauge"
},
arc: {
rangeText: {
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
unit: "%"
}
},
gauge: {
label: {
extents: function() { return ""; }
}
}
}
},
{
options: {
title: {
text: "Fixed range text in 'percent' value"
},
size: {
height: 220
},
data: {
columns: [
["data1", 30],
["data2", 120],
["data3", 50]
],
type: "gauge"
},
arc: {
rangeText: {
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
unit: "%",
fixed: true
}
},
gauge: {
label: {
extents: function() { return ""; }
}
}
}
}],
GaugeStackData: [
{
options: {
Expand Down
43 changes: 43 additions & 0 deletions demo/simple-sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,44 @@ div.row {
text-decoration: underline;
}

#exportPreserveFontStyle svg {
font-family: 'Alfa Slab One';
}

#fitPadding_1 svg {
border: 1px dashed blue;
margin-bottom: 20px;
}

#fitPadding_2 svg {
border: 1px dashed red;
}

#donutNeedle_1 .bb-chart-arcs-title, #donutNeedle_2 .bb-chart-arcs-title {
font-size: 3em;
fill: blue;
transform: translateY(40px);
}

.dark #donutNeedle_1 .bb-chart-arcs-title, .dark #donutNeedle_2 .bb-chart-arcs-title {
fill: #828181;
}

#gaugeNeedle_1 .bb-chart-arcs-gauge-title tspan:first-child {
font-size: 0.3em;
}

#gaugeNeedle_1 .bb-chart-arcs-gauge-title {
transform: translateY(-80px);
font-size: 4em;
}

#gaugeNeedle_2 .bb-chart-arcs-gauge-title {
font-size: 3.5em;
fill: red;
transform: translateY(-20px);
}

/* Style For Region */
#styleForRegion .bb-region-0 {fill:red;}
#styleForRegion .bb-region.foo {fill:green;}
Expand Down Expand Up @@ -384,3 +422,8 @@ div.row {
/* Background */
.myBgClass { transform: scale(0.9) translate(15px, -10px); opacity: 0.1; }


div[id$="_2"], div[id$="_3"], div[id$="_4"], div[id$="_5"] {
margin: 20px 0;
box-shadow: 0 -1px 0 #ccc;
}
45 changes: 7 additions & 38 deletions demo/tomorrow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
color: #8959a8;
}

g > text.bb-title {
font-size: 1.3em;
stroke-width: 2px;
font-weight: bold;
}

@media (min-width: 1200px) {
.example-grid {
display: grid;
Expand Down Expand Up @@ -80,6 +86,7 @@ pre code {
line-height: 1.3;
border: 1px solid #ccc;
padding: 10px;
overscroll-behavior: contain;
}

code.html {
Expand Down Expand Up @@ -123,44 +130,6 @@ code.html {
src: url(https://fonts.gstatic.com/s/alfaslabone/v17/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhe_escmA.woff2) format('woff2');
}

#exportPreserveFontStyle svg {
font-family: 'Alfa Slab One';
}

#fitPadding_1 svg {
border: 1px dashed blue;
margin-bottom: 20px;
}

#fitPadding_2 svg {
border: 1px dashed red;
}

#donutNeedle_1 .bb-chart-arcs-title, #donutNeedle_2 .bb-chart-arcs-title {
font-size: 3em;
fill: blue;
transform: translateY(40px);
}

.dark #donutNeedle_1 .bb-chart-arcs-title, .dark #donutNeedle_2 .bb-chart-arcs-title {
fill: #828181;
}

#gaugeNeedle_1 .bb-chart-arcs-gauge-title tspan:first-child {
font-size: 0.3em;
}

#gaugeNeedle_1 .bb-chart-arcs-gauge-title {
transform: translateY(-80px);
font-size: 4em;
}

#gaugeNeedle_2 .bb-chart-arcs-gauge-title {
font-size: 3.5em;
fill: red;
transform: translateY(-20px);
}

body.dark {
background-color: #000;
color: #d4d4d4;
Expand Down
9 changes: 6 additions & 3 deletions src/ChartInternal/data/data.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -626,10 +626,13 @@ export default {

if (orderAsc || orderDesc) {
const reducer = (p, c) => p + Math.abs(c.value);
const sum = v => (isNumber(v) ? v : (
"values" in v ? v.values.reduce(reducer, 0) : v.value)
);

fn = (t1: IData | IDataRow, t2: IData | IDataRow) => {
const t1Sum = "values" in t1 ? t1.values.reduce(reducer, 0) : t1.value;
const t2Sum = "values" in t2 ? t2.values.reduce(reducer, 0) : t2.value;
const t1Sum = sum(t1);
const t2Sum = sum(t2);

return isReversed ?
(orderAsc ? t1Sum - t2Sum : t2Sum - t1Sum) :
Expand Down Expand Up @@ -965,7 +968,7 @@ export default {
// otherwise, based on the rendered angle value
} else {
const gaugeArcLength = config.gauge_fullCircle ?
$$.getArcLength() : $$.getGaugeStartAngle() * -2;
$$.getArcLength() : $$.getStartingAngle() * -2;
const arcLength = $$.hasType("gauge") ? gaugeArcLength : Math.PI * 2;

ratio = (d.endAngle - d.startAngle) / arcLength;
Expand Down
11 changes: 11 additions & 0 deletions src/ChartInternal/internals/size.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,17 @@ export default {
state.arcWidth = state.width - (isLegendRight ? currLegend.width + 10 : 0) - textWidth;
state.arcHeight = state.height - (isLegendRight && !hasGauge ? 0 : 10);

if (config.arc_rangeText_values?.length) {
if (hasGauge) {
state.arcWidth -= 25;
state.arcHeight -= 10;
state.margin.left += 10;
} else {
state.arcHeight -= 20;
state.margin.top += 10;
}
}

if (hasGauge && !config.gauge_fullCircle) {
state.arcHeight += state.height - $$.getPaddingBottomForGauge();
}
Expand Down
4 changes: 4 additions & 0 deletions src/ChartInternal/internals/transform.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,10 @@ export default {
} else if (target === "arc") {
x = state.arcWidth / 2;
y = state.arcHeight / 2;

if (config.arc_rangeText_values?.length) {
y += 5 + ($$.hasType("gauge") && config.title_text ? 10 : 0);
}
} else if (target === "polar") {
x = state.arcWidth / 2;
y = state.arcHeight / 2;
Expand Down
Loading

0 comments on commit be4aeba

Please sign in to comment.