billboard.js
Version:
Re-usable easy interface JavaScript chart library, based on D3 v4+
855 lines (854 loc) • 32.9 kB
JavaScript
/*!
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*
* billboard.js, JavaScript chart library
* https://naver.github.io/billboard.js/
*
* @version 4.1.1
*/
import { document as doc } from "../../module/browser.js";
import { isDefined, isFunction, isNumber, isObject, isUndefined } from "../../module/util/type-checks.js";
import { callFn, endall, tplProcess } from "../../module/util/object.js";
import { setTextValue } from "../../module/util/dom.js";
import { $ARC, $COMMON, $FOCUS, $GAUGE } from "../../config/classes.js";
import { meetsLabelThreshold, updateTextImage, updateTextImagePos } from "../internals/text.util.js";
import { isLabelWithLine, redrawArcLabelLines } from "../internals/text.arc.js";
import { select } from "d3-selection";
import { arc, pie } from "d3-shape";
import { interpolate } from "d3-interpolate";
//#region src/ChartInternal/shape/arc.ts
/**
* Copyright (c) 2017 ~ present NAVER Corp.
* billboard.js project is licensed under the MIT license
*/
const ARC_TYPES = [
"donut",
"gauge",
"pie",
"polar"
];
/**
* Get the first matching arc chart type
* @param {ChartInternalThis} $$ ChartInternal context
* @returns {string|undefined} Chart type or undefined
* @private
*/
function _getArcType($$) {
return [
"donut",
"pie",
"polar",
"gauge"
].find((type) => $$.hasType(type));
}
/**
* Calculate position for range text or multi-arc gauge labels
* @param {ChartInternalThis} $$ ChartInternal context
* @param {IArcData} d Data object
* @param {IArcData} updated Updated angle data
* @param {boolean} forRange Whether is for ranged text option
* @returns {object} Position object {x, y}
* @private
*/
function _calculateRangeOrGaugePosition($$, d, updated, forRange) {
const { config, state: { radiusExpanded } } = $$;
const angle = updated.endAngle - Math.PI / 2;
const sinAngle = Math.sin(angle);
const pos = {
x: Math.cos(angle) * (radiusExpanded + (forRange ? 5 : 25)),
y: sinAngle * (radiusExpanded + 15 - Math.abs(sinAngle * 10)) + 3
};
if (forRange) {
const rangeTextPosition = config.arc_rangeText_position;
if (rangeTextPosition) {
const rangeValues = config.arc_rangeText_values;
const position = isFunction(rangeTextPosition) ? rangeTextPosition(rangeValues[d.index]) : rangeTextPosition;
pos.x += position?.x ?? 0;
pos.y += position?.y ?? 0;
}
}
return pos;
}
/**
* Calculate label ratio for standard arc types
* @param {ChartInternalThis} $$ ChartInternal context
* @param {IArcData} d Data object
* @param {number} outerRadius Outer radius value
* @param {number} distance Distance from center
* @returns {number} Calculated ratio
* @private
*/
function _calculateLabelRatio($$, d, outerRadius, distance) {
const { config } = $$;
const chartType = _getArcType($$);
let ratio = chartType ? config[`${chartType}_label_ratio`] : void 0;
if (ratio) ratio = isFunction(ratio) ? ratio.bind($$.api)(d, outerRadius, distance) : ratio;
else {
const LABEL_MIN_SIZE = 36;
const LABEL_RATIO_THRESHOLD = .375;
const LABEL_RATIO_BASE = 1.175;
const LABEL_RATIO_LARGE = .8;
const labelSpaceRatio = LABEL_MIN_SIZE / outerRadius;
ratio = outerRadius && distance ? (labelSpaceRatio > LABEL_RATIO_THRESHOLD ? LABEL_RATIO_BASE - labelSpaceRatio : LABEL_RATIO_LARGE) * outerRadius / distance : 0;
}
return ratio;
}
/**
* Calculate position for standard arc label (donut, pie, polar)
* @param {ChartInternalThis} $$ ChartInternal context
* @param {IArcData} d Data object
* @param {IArcData} updated Updated angle data
* @returns {object} Object with pos {x, y} and ratio
* @private
*/
function _calculateStandardArcPosition($$, d, updated) {
let { outerRadius } = $$.getRadius(d);
if ($$.hasType("polar")) outerRadius = $$.getPolarOuterRadius(d, outerRadius);
const [x, y] = $$.svgArc.centroid(updated).map((v) => isNaN(v) ? 0 : v);
const distance = Math.sqrt(x * x + y * y);
const ratio = _calculateLabelRatio($$, d, outerRadius, distance);
return {
pos: {
x,
y
},
ratio
};
}
/**
* Get radius functions
* @param {number} expandRate Expand rate number.
* - If 0, means for "normal" radius.
* - If > 0, means for "expanded" radius.
* @returns {object} radius functions
* @private
*/
function _getRadiusFn(expandRate = 0) {
const $$ = this;
const { config, state } = $$;
const hasMultiArcGauge = $$.hasMultiArcGauge();
const singleArcWidth = state.gaugeArcWidth / $$.getTargetsToShow().length;
const expandWidth = expandRate ? Math.min(state.radiusExpanded * expandRate - state.radius, singleArcWidth * .8 - (1 - expandRate) * 100) : 0;
return {
/**
* Getter of arc innerRadius value
* @param {IArcData} d Data object
* @returns {number} innerRadius value
* @private
*/
inner(d) {
const { innerRadius } = $$.getRadius(d);
return hasMultiArcGauge ? state.radius - singleArcWidth * (d.index + 1) : isNumber(innerRadius) ? innerRadius : 0;
},
/**
* Getter of arc outerRadius value
* @param {IArcData} d Data object
* @returns {number} outerRadius value
* @private
*/
outer(d) {
const { outerRadius } = $$.getRadius(d);
let radius;
if (hasMultiArcGauge) radius = state.radius - singleArcWidth * d.index + expandWidth;
else if ($$.hasType("polar") && !expandRate) radius = $$.getPolarOuterRadius(d, outerRadius);
else {
radius = outerRadius;
if (expandRate) {
let { radiusExpanded } = state;
if (state.radius !== outerRadius) radiusExpanded -= Math.abs(state.radius - outerRadius);
radius = radiusExpanded * expandRate;
}
}
return radius;
},
/**
* Getter of arc cornerRadius value
* @param {IArcData} d Data object
* @param {number} outerRadius outer radius value
* @returns {number} cornerRadius value
* @private
*/
corner(d, outerRadius) {
const { arc_cornerRadius_ratio: ratio = 0, arc_cornerRadius: cornerRadius = 0 } = config;
const { data: { id }, value } = d;
let corner;
if (ratio) corner = ratio * outerRadius;
else corner = isNumber(cornerRadius) ? cornerRadius : cornerRadius.call($$.api, id, value, outerRadius);
return corner;
}
};
}
/**
* Get attrTween function to get interpolated value on transition
* @param {function} fn Arc function to execute
* @returns {function} attrTween function
* @private
*/
function _getAttrTweenFn(fn) {
return function(d) {
const getAngleKeyValue = ({ startAngle = 0, endAngle = 0, padAngle = 0 }) => ({
startAngle,
endAngle,
padAngle
});
const interpolate$1 = interpolate(getAngleKeyValue(this._current), getAngleKeyValue(d));
this._current = d;
return function(t) {
const interpolated = interpolate$1(t);
const { data, index, value } = d;
return fn({
...interpolated,
data,
index,
value
});
};
};
}
var arc_default = {
initPie() {
const $$ = this;
const { config } = $$;
const dataType = config.data_type;
const padding = config[`${dataType}_padding`];
const startingAngle = config[`${dataType}_startingAngle`] || 0;
const padAngle = (padding ? padding * .01 : config[`${dataType}_padAngle`]) || 0;
$$.pie = pie().startAngle(startingAngle).endAngle(startingAngle + 2 * Math.PI).padAngle(padAngle).value((d) => d.values?.reduce((a, b) => a + b.value, 0) ?? d).sort($$.getSortCompareFn.bind($$)(true));
},
updateRadius() {
const $$ = this;
const { config, state } = $$;
const padding = config[`${config.data_type}_padding`];
const w = config.gauge_width || config.donut_width;
const gaugeArcWidth = $$.getTargetsToShow().length * config.gauge_arcs_minWidth;
const LABEL_RADIUS_RATIO = .85;
const labelWithLineRatio = isLabelWithLine.call($$) ? LABEL_RADIUS_RATIO : 1;
state.radiusExpanded = Math.min(state.arcWidth, state.arcHeight) / 2 * ($$.hasMultiArcGauge() && config.gauge_label_show ? LABEL_RADIUS_RATIO : labelWithLineRatio);
state.radius = state.radiusExpanded * .95;
state.innerRadiusRatio = w ? (state.radius - w) / state.radius : .6;
state.gaugeArcWidth = w || (gaugeArcWidth <= state.radius - state.innerRadius ? state.radius - state.innerRadius : gaugeArcWidth <= state.radius ? gaugeArcWidth : state.radius);
const innerRadius = config.pie_innerRadius || (padding ? padding * (state.innerRadiusRatio + .1) : 0);
state.outerRadius = config.pie_outerRadius;
state.innerRadius = $$.hasType("donut") || $$.hasType("gauge") ? state.radius * state.innerRadiusRatio : innerRadius;
},
/**
* Get pie's inner & outer radius value
* @param {object|undefined} d Data object
* @returns {object}
* @private
*/
getRadius(d) {
const $$ = this;
const data = d?.data;
let { innerRadius, outerRadius } = $$.state;
if (!isNumber(innerRadius) && data) innerRadius = innerRadius[data.id] || 0;
if (isObject(outerRadius) && data && data.id in outerRadius) outerRadius = outerRadius[data.id];
else if (!isNumber(outerRadius)) outerRadius = $$.state.radius;
return {
innerRadius,
outerRadius
};
},
updateArc() {
const $$ = this;
$$.updateRadius();
$$.svgArc = $$.getSvgArc();
$$.svgArcExpanded = $$.getSvgArcExpanded();
},
getArcLength() {
const { config } = this;
const arcLengthInPercent = config.gauge_arcLength * 3.6;
let len = 2 * (arcLengthInPercent / 360);
if (arcLengthInPercent < -360) len = -2;
else if (arcLengthInPercent > 360) len = 2;
return len * Math.PI;
},
getStartingAngle() {
const $$ = this;
const { config } = $$;
const dataType = config.data_type;
const isFullCircle = $$.hasType("gauge") ? config.gauge_fullCircle : false;
const defaultStartAngle = -1 * Math.PI / 2;
const defaultEndAngle = Math.PI / 2;
let startAngle = config[`${dataType}_startingAngle`] || 0;
if (!isFullCircle && startAngle <= defaultStartAngle) startAngle = defaultStartAngle;
else if (!isFullCircle && startAngle >= defaultEndAngle) startAngle = defaultEndAngle;
else if (startAngle > Math.PI || startAngle < -1 * Math.PI) startAngle = Math.PI;
return startAngle;
},
/**
* Update angle data
* @param {object} dValue Data object
* @param {boolean} forRange Weather is for ranged text option(arc.rangeText.values)
* @returns {object|null} Updated angle data
* @private
*/
updateAngle(dValue, forRange = false) {
const $$ = this;
const { config, state } = $$;
const hasGauge = forRange && $$.hasType("gauge");
let { pie } = $$;
let d = dValue;
let found = false;
if (!config) return null;
const gStart = $$.getStartingAngle();
const radius = config.gauge_fullCircle || forRange && !hasGauge ? $$.getArcLength() : gStart * -2;
const isSingleArcGauge = d.data && $$.isGaugeType(d.data) && !$$.hasMultiArcGauge();
if (isSingleArcGauge) {
const { gauge_min: gMin, gauge_max: gMax } = config;
const gEnd = radius * (($$.getTotalDataSum(state.rendered) - gMin) / (gMax - gMin));
pie = pie.startAngle(gStart).endAngle(gEnd + gStart);
}
if (forRange === false) {
let layout;
if (isSingleArcGauge) layout = pie($$.filterTargetsToShow());
else {
const cacheKey = "$arcPieLayout";
let cached = $$.cache.get(cacheKey);
if (!cached || cached.generation !== state.redrawGeneration) {
cached = {
generation: state.redrawGeneration,
layout: pie($$.filterTargetsToShow())
};
$$.cache.add(cacheKey, cached);
}
layout = cached.layout;
}
layout.forEach((t, i) => {
if (!found && t.data.id === d.data?.id) {
found = true;
d = t;
d.index = i;
}
});
}
if (isNaN(d.startAngle)) d.startAngle = 0;
if (isNaN(d.endAngle)) d.endAngle = d.startAngle;
if (forRange || d.data && (config.gauge_enforceMinMax || $$.hasMultiArcGauge())) {
const { gauge_min: gMin, gauge_max: gMax } = config;
const max = forRange && !hasGauge ? $$.getTotalDataSum(state.rendered) : gMax;
const gTic = radius / (max - gMin);
const value = d.value ?? 0;
const gValue = value < gMin ? 0 : value < max ? value - gMin : max - gMin;
d.startAngle = gStart;
d.endAngle = gStart + gTic * gValue;
}
return found || forRange ? d : null;
},
getSvgArc() {
const $$ = this;
const { inner, outer, corner } = _getRadiusFn.call($$);
const arc$1 = arc().innerRadius(inner).outerRadius(outer);
const newArc = function(d, withoutUpdate) {
let path = "M 0 0";
if (d.value || d.data) {
const data = withoutUpdate ? d : $$.updateAngle(d) ?? null;
if (data) path = arc$1.cornerRadius(corner(data, outer(data)))(data);
}
return path;
};
newArc.centroid = arc$1.centroid;
return newArc;
},
/**
* Get expanded arc path function
* @param {number} rate Expand rate
* @returns {function} Expanded arc path getter function
* @private
*/
getSvgArcExpanded(rate = 1) {
const $$ = this;
const { inner, outer, corner } = _getRadiusFn.call($$, rate);
const arc$2 = arc().innerRadius(inner).outerRadius(outer);
return (d) => {
const updated = $$.updateAngle(d);
const outerR = outer(updated);
let cornerR = 0;
if (updated) cornerR = corner(updated, outerR);
return updated ? arc$2.cornerRadius(cornerR)(updated) || "M 0 0" : "M 0 0";
};
},
getArc(d, withoutUpdate, force) {
return force || this.isArcType(d.data) ? this.svgArc(d, withoutUpdate) : "M 0 0";
},
/**
* Render range value text
* @private
*/
redrawArcRangeText() {
const $$ = this;
const { config, $el: { arcs }, state, $T } = $$;
const format = config.arc_rangeText_format;
const fixed = $$.hasType("gauge") && config.arc_rangeText_fixed;
let values = config.arc_rangeText_values;
if (values?.length) {
const isPercent = config.arc_rangeText_unit === "%";
const totalSum = $$.getTotalDataSum(state.rendered);
if (isPercent) values = values.map((v) => totalSum / 100 * v);
const pieData = $$.pie(values).map((d, i) => (d.index = i, d));
let rangeText = arcs.selectAll(`.${$ARC.arcRange}`).data(values);
rangeText.exit().remove();
rangeText = $T(rangeText.enter().append("text").attr("class", $ARC.arcRange).style("text-anchor", "middle").style("pointer-events", "none").style("opacity", "0").text((v) => {
const range = isPercent ? v / totalSum * 100 : v;
return isFunction(format) ? format(range) : `${range}${isPercent ? "%" : ""}`;
}).merge(rangeText));
if ((!state.rendered || state.rendered && !fixed) && totalSum > 0) rangeText.attr("transform", function(d, i) {
return $$.transformForArcLabel(this, pieData[i], true);
});
rangeText.style("opacity", (d) => !fixed && (d > totalSum || totalSum === 0) ? "0" : null);
}
},
/**
* Set transform attributes to arc label text
* @param {SVGTextElement} textNode Text node element
* @param {object} d Data object
* @param {boolean} forRange Weather is for ranged text option(arc.rangeText.values)
* @returns {string} Translate attribute string
* @private
*/
transformForArcLabel(textNode, d, forRange = false) {
const $$ = this;
const updated = $$.updateAngle(d, forRange);
if (!updated) return "";
let pos;
let ratio = 1;
if (forRange || $$.hasMultiArcGauge()) pos = _calculateRangeOrGaugePosition($$, d, updated, forRange);
else if (!$$.hasType("gauge") || $$.data.targets.length > 1) {
const result = _calculateStandardArcPosition($$, d, updated);
pos = result.pos;
ratio = result.ratio;
} else return "";
updateTextImagePos.call($$, textNode, pos);
return `translate(${pos.x * ratio},${pos.y * ratio})`;
},
convertToArcData(d) {
return this.addName({
id: "data" in d ? d.data.id : d.id,
value: d.value,
ratio: this.getRatio("arc", d),
index: d.index
});
},
textForArcLabel(selection) {
const $$ = this;
const hasGauge = $$.hasType("gauge");
const chartType = ARC_TYPES.filter($$.hasType.bind($$))?.[0];
if ($$.shouldShowArcLabel()) selection.style("fill", $$.updateTextColor.bind($$)).attr("filter", (d) => $$.updateTextBGColor.bind($$)(d, $$.config.data_labels_backgroundColors)).each(function(d) {
const node = select(this);
const updated = $$.updateAngle(d);
const ratio = $$.getRatio("arc", updated);
const meetsThreshold = meetsLabelThreshold.call($$, ratio, chartType);
d._cache = {
updated,
ratio,
meetsThreshold
};
if (meetsThreshold) {
const { value } = updated || d;
const text = ($$.getArcLabelConfig("format") || $$.defaultArcValueFormat)(value, ratio, d.data.id).toString();
setTextValue(node, text, [-1, 1], hasGauge);
} else node.text("");
});
},
expandArc(targetIds) {
const $$ = this;
const { state: { transiting }, $el } = $$;
if (transiting) {
const interval = setInterval(() => {
if (!$$.state.transiting) {
clearInterval(interval);
$el.legend.selectAll(`.${$FOCUS.legendItemFocused}`).size() > 0 && $$.expandArc(targetIds);
}
}, 10);
return;
}
const newTargetIds = $$.mapToTargetIds(targetIds);
$el.svg.selectAll($$.selectorTargets(newTargetIds, `.${$ARC.chartArc}`)).each(function(d) {
if (!$$.shouldExpand(d.data.id)) return;
const expandDuration = $$.getExpandConfig(d.data.id, "duration");
const svgArcExpandedSub = $$.getSvgArcExpanded($$.getExpandConfig(d.data.id, "rate"));
select(this).selectAll("path").transition().duration(expandDuration).attrTween("d", _getAttrTweenFn($$.svgArcExpanded.bind($$))).transition().duration(expandDuration * 2).attrTween("d", _getAttrTweenFn(svgArcExpandedSub.bind($$)));
});
},
unexpandArc(targetIds) {
const $$ = this;
const { state: { transiting }, $el: { svg } } = $$;
if (transiting) return;
const newTargetIds = $$.mapToTargetIds(targetIds);
svg.selectAll($$.selectorTargets(newTargetIds, `.${$ARC.chartArc}`)).selectAll("path").transition().duration((d) => $$.getExpandConfig(d.data.id, "duration")).attrTween("d", _getAttrTweenFn($$.svgArc.bind($$)));
svg.selectAll(`${$ARC.arc}`).style("opacity", null);
},
/**
* Get expand config value
* @param {string} id data ID
* @param {string} key config key: 'duration | rate'
* @returns {number}
* @private
*/
getExpandConfig(id, key) {
const $$ = this;
const { config } = $$;
const def = {
duration: 50,
rate: .98
};
let type;
if ($$.isDonutType(id)) type = "donut";
else if ($$.isGaugeType(id)) type = "gauge";
else if ($$.isPieType(id)) type = "pie";
return type ? config[`${type}_expand_${key}`] : def[key];
},
shouldExpand(id) {
const $$ = this;
const { config } = $$;
const type = $$.isDonutType(id) ? "donut" : $$.isGaugeType(id) ? "gauge" : $$.isPieType(id) ? "pie" : null;
return type ? !!config[`${type}_expand`] : false;
},
shouldShowArcLabel() {
const $$ = this;
const { config } = $$;
return ARC_TYPES.some((v) => $$.hasType(v) && config[`${v}_label_show`]);
},
getArcLabelConfig(name = "format") {
const $$ = this;
const { config } = $$;
let fn = (v) => v;
ARC_TYPES.filter($$.hasType.bind($$)).forEach((v) => {
fn = config[`${v}_label_${name}`];
});
if (name === "format") return isFunction(fn) ? fn.bind($$.api) : fn;
else return fn;
},
updateTargetsForArc(targets) {
const $$ = this;
const { $el } = $$;
const hasGauge = $$.hasType("gauge");
const classChartArc = $$.getChartClass("Arc");
const classArcs = $$.getClass("arcs", true);
const classFocus = $$.classFocus.bind($$);
const chartArcs = $el.main.select(`.${$ARC.chartArcs}`);
const mainPieUpdate = chartArcs.selectAll(`.${$ARC.chartArc}`).data($$.pie(targets)).attr("class", (d) => classChartArc(d) + classFocus(d.data));
const mainPieEnter = mainPieUpdate.enter().append("g").attr("class", classChartArc).call(this.setCssRule(false, `.${$ARC.chartArcs} text`, ["pointer-events:none", "text-anchor:middle"]));
mainPieEnter.append("g").attr("class", classArcs).merge(mainPieUpdate);
mainPieEnter.append("text").attr("dy", hasGauge && !$$.hasMultiTargets() ? "-.1em" : null).style("opacity", "0").style("text-anchor", $$.getStylePropValue("middle")).style("pointer-events", $$.getStylePropValue("none"));
$el.text = chartArcs.selectAll(`.${$COMMON.target} text`);
},
initArc() {
const $$ = this;
const { $el } = $$;
$el.arcs = $el.main.select(`.${$COMMON.chart}`).append("g").attr("class", $ARC.chartArcs).attr("transform", $$.getTranslate("arc"));
$$.setArcTitle();
},
/**
* Set arc title text
* @param {string} str Title text
* @private
*/
setArcTitle(str) {
const $$ = this;
const title = str || $$.getArcTitle();
const hasGauge = $$.hasType("gauge");
if (title) {
const className = hasGauge ? $GAUGE.chartArcsGaugeTitle : $ARC.chartArcsTitle;
let text = $$.$el.arcs.select(`.${className}`);
if (text.empty()) text = $$.$el.arcs.append("text").attr("class", className).style("text-anchor", "middle");
hasGauge && text.attr("dy", "-0.3em");
setTextValue(text, title, hasGauge ? void 0 : [-.6, 1.35], true);
}
},
/**
* Return arc title text
* @returns {string} Arc title text
* @private
*/
getArcTitle() {
const $$ = this;
const type = $$.hasType("donut") && "donut" || $$.hasType("gauge") && "gauge";
return type ? $$.config[`${type}_title`] : "";
},
/**
* Get arc title text with needle value
* @returns {string|boolean} When title contains needle template string will return processed string, otherwise false
* @private
*/
getArcTitleWithNeedleValue() {
const $$ = this;
const { config, state } = $$;
const title = $$.getArcTitle();
if (title && $$.config.arc_needle_show && /{=[A-Z_]+}/.test(title)) {
let value = state.current.needle;
if (!isNumber(value)) value = config.arc_needle_value;
return tplProcess(title, { NEEDLE_VALUE: ~~value });
}
return false;
},
redrawArc(duration, durationForExit, withTransform) {
const $$ = this;
const { config, state, $el: { main } } = $$;
const hasInteraction = config.interaction_enabled;
const isSelectable = hasInteraction && config.data_selection_isselectable;
let mainArc = main.selectAll(`.${$ARC.arcs}`).selectAll(`.${$ARC.arc}`).data($$.arcData.bind($$));
mainArc.exit().transition().duration(durationForExit).style("opacity", "0").remove();
mainArc = mainArc.enter().append("path").attr("class", $$.getClass("arc", true)).style("fill", (d) => $$.color(d.data)).style("cursor", (d) => isSelectable?.bind?.($$.api)(d) ? "pointer" : null).style("opacity", "0").each(function(d) {
if ($$.isGaugeType(d.data)) {
d.startAngle = config.gauge_startingAngle;
d.endAngle = config.gauge_startingAngle;
}
this._current = d;
}).merge(mainArc);
if ($$.hasType("gauge")) {
$$.updateGaugeMax();
$$.hasMultiArcGauge() && $$.redrawArcGaugeLine();
}
mainArc.attr("transform", (d) => !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : "").style("opacity", function(d) {
return d === this._current ? "0" : null;
}).each(() => {
state.transiting = true;
}).transition().duration(duration).attrTween("d", function(d) {
const updated = $$.updateAngle(d);
if (!updated) return () => "M 0 0";
if (isNaN(this._current.startAngle)) this._current.startAngle = 0;
if (isNaN(this._current.endAngle)) this._current.endAngle = this._current.startAngle;
const interpolate$2 = interpolate(this._current, updated);
this._current = interpolate$2(0);
return function(t) {
const interpolated = interpolate$2(t);
interpolated.data = d.data;
return $$.getArc(interpolated, true);
};
}).attr("transform", withTransform ? "scale(1)" : "").style("fill", (d) => {
let color;
if ($$.levelColor) {
color = $$.levelColor(d.data.values[0].value);
config.data_colors[d.data.id] = color;
} else color = $$.color(d.data);
return color;
}).style("opacity", null).call(endall, function() {
if ($$.levelColor) {
const path = select(this);
const d = path.datum(this._current);
$$.updateLegendItemColor(d.data.id, path.style("fill"));
}
state.transiting = false;
if (state.redrawing) {
state.redrawing = false;
state._targetsToShow = null;
state._cachedDrawShape = null;
}
callFn(config.onrendered, $$.api);
});
hasInteraction && $$.bindArcEvent(mainArc);
$$.hasType("polar") && $$.redrawPolar();
$$.hasType("gauge") && $$.redrawBackgroundArcs();
config.arc_needle_show && $$.redrawNeedle();
$$.redrawArcText(duration);
$$.redrawArcRangeText();
},
/**
* Update needle element
* @private
*/
redrawNeedle() {
const $$ = this;
const { $el, config, state: { hiddenTargetIds, radius } } = $$;
const length = (radius - 1) / 100 * config.arc_needle_length;
const hasDataToShow = hiddenTargetIds.size !== $$.data.targets.length;
let needle = $$.$el.arcs.select(`.${$ARC.needle}`);
const pathFn = config.arc_needle_path;
const baseWidth = config.arc_needle_bottom_width / 2;
const topWidth = config.arc_needle_top_width / 2;
const topRx = config.arc_needle_top_rx;
const topRy = config.arc_needle_top_ry;
const bottomLen = config.arc_needle_bottom_len;
const bottomRx = config.arc_needle_bottom_rx;
const bottomRy = config.arc_needle_bottom_ry;
const needleAngle = $$.getNeedleAngle();
const updateNeedleValue = () => {
const title = $$.getArcTitleWithNeedleValue();
title && $$.setArcTitle(title);
};
updateNeedleValue();
if (needle.empty()) {
needle = $el.arcs.append("path").classed($ARC.needle, true);
$el.needle = needle;
/**
* Function to be exposed as public to facilitate updating needle
* @param {number} v Value to be updated
* @param {boolean} updateConfig Weather update config's value
* @private
*/
$el.needle.updateHelper = (v, updateConfig = false) => {
if ($el.needle.style("display") !== "none") $$.$T($el.needle).style("transform", `rotate(${$$.getNeedleAngle(v)}deg)`).call(endall, () => {
updateConfig && (config.arc_needle_value = v);
updateNeedleValue();
});
};
}
if (hasDataToShow) {
const path = isFunction(pathFn) ? pathFn.call($$, length) : `M-${baseWidth} ${bottomLen} A${bottomRx} ${bottomRy} 0 0 0 ${baseWidth} ${bottomLen} L${topWidth} -${length} A${topRx} ${topRy} 0 0 0 -${topWidth} -${length} L-${baseWidth} ${bottomLen} Z`;
$$.$T(needle).attr("d", path).style("fill", config.arc_needle_color).style("display", null).style("transform", `rotate(${needleAngle}deg)`);
} else needle.style("display", "none");
},
/**
* Get needle angle value relative given value
* @param {number} v Value to be calculated angle
* @returns {number} angle value
* @private
*/
getNeedleAngle(v) {
const $$ = this;
const { config, state } = $$;
const arcLength = $$.getArcLength();
const hasGauge = $$.hasType("gauge");
const total = $$.getTotalDataSum(true);
let value = isDefined(v) ? v : config.arc_needle_value;
let startingAngle = config[`${config.data_type}_startingAngle`] || 0;
let radian;
if (!isNumber(value)) value = hasGauge && $$.data.targets.length === 1 ? total : 0;
state.current.needle = value;
if (hasGauge) {
startingAngle = $$.getStartingAngle();
const radius = config.gauge_fullCircle ? arcLength : startingAngle * -2;
const { gauge_min: min, gauge_max: max } = config;
radian = radius * ((value - min) / (max - min));
} else radian = total ? arcLength * (value / total) : 0;
return (startingAngle + radian) * (180 / Math.PI);
},
redrawBackgroundArcs() {
const $$ = this;
const { config, state } = $$;
const hasMultiArcGauge = $$.hasMultiArcGauge();
const isFullCircle = config.gauge_fullCircle;
const showEmptyTextLabel = $$.getTargetsToShow().length === 0 && !!config.data_empty_label_text;
const startAngle = $$.getStartingAngle();
const endAngle = isFullCircle ? startAngle + $$.getArcLength() : startAngle * -1;
let backgroundArc = $$.$el.arcs.select(`${hasMultiArcGauge ? "g" : ""}.${$ARC.chartArcsBackground}`);
if (hasMultiArcGauge) {
let index = 0;
backgroundArc = backgroundArc.selectAll(`path.${$ARC.chartArcsBackground}`).data($$.data.targets);
backgroundArc.enter().append("path").attr("class", (d, i) => `${$ARC.chartArcsBackground} ${$ARC.chartArcsBackground}-${i}`).merge(backgroundArc).style("fill", config.gauge_background || null).attr("d", ({ id }) => {
if (showEmptyTextLabel || state.hiddenTargetIds.has(id)) return "M 0 0";
const d = {
data: [{ value: config.gauge_max }],
startAngle,
endAngle,
index: index++
};
return $$.getArc(d, true, true);
});
backgroundArc.exit().remove();
} else backgroundArc.attr("d", showEmptyTextLabel ? "M 0 0" : () => {
return $$.getArc({
data: [{ value: config.gauge_max }],
startAngle,
endAngle
}, true, true);
});
},
bindArcEvent(arc) {
const $$ = this;
const { config, state } = $$;
const isTouch = state.inputType === "touch";
const isMouse = state.inputType === "mouse";
const _getArcData = (d) => {
const updated = $$.updateAngle(d);
return updated ? $$.convertToArcData(updated) : null;
};
function selectArc(_this, arcData, id) {
$$.expandArc(id);
$$.api.focus(id);
$$.toggleFocusLegend(id, true);
$$.showTooltip([arcData], _this);
}
function unselectArc(arcData) {
$$.unexpandArc(arcData?.id || void 0);
$$.api.revert();
$$.revertLegend();
$$.hideTooltip();
}
arc.on("click", function(event, d, i) {
const arcData = _getArcData(d);
if (arcData) {
$$.toggleShape?.(this, arcData, i);
config.data_onclick.bind($$.api)(arcData, this);
}
});
if (isMouse) arc.on("mouseover", function(event, d) {
if (state.transiting) return;
state.event = event;
const arcData = _getArcData(d);
const id = arcData?.id || void 0;
selectArc(this, arcData, id);
$$.setOverOut(true, arcData);
}).on("mouseout", (event, d) => {
if (state.transiting || !config.interaction_onout) return;
state.event = event;
const arcData = _getArcData(d);
unselectArc();
$$.setOverOut(false, arcData);
}).on("mousemove", function(event, d) {
const arcData = _getArcData(d);
state.event = event;
$$.showTooltip([arcData], this);
});
if (isTouch && $$.hasArcType() && !$$.radars) {
const getEventArc = (event) => {
const { clientX, clientY } = event.changedTouches?.[0] ?? {
clientX: 0,
clientY: 0
};
return select(doc.elementFromPoint(clientX, clientY));
};
$$.$el.svg.on("touchstart touchmove", function(event) {
if (state.transiting) return;
state.event = event;
const datum = getEventArc(event).datum();
const updated = datum?.data && datum.data.id ? $$.updateAngle(datum) : null;
const arcData = updated ? $$.convertToArcData(updated) : null;
const id = arcData?.id || void 0;
$$.callOverOutForTouch(arcData);
isUndefined(id) ? unselectArc() : selectArc(this, arcData, id);
}, { passive: true });
}
},
redrawArcText(duration) {
const $$ = this;
const { config, state, $el: { main, arcs } } = $$;
const hasGauge = $$.hasType("gauge");
const hasMultiArcGauge = $$.hasMultiArcGauge();
let text;
if (!(hasGauge && $$.data.targets.length === 1 && config.gauge_title)) {
text = main.selectAll(`.${$ARC.chartArc}`).select("text").style("opacity", "0").attr("class", (d) => $$.isGaugeType(d.data) ? $GAUGE.gaugeValue : null).call($$.textForArcLabel.bind($$)).style("font-size", (d) => $$.isGaugeType(d.data) && $$.data.targets.length === 1 && !hasMultiArcGauge ? `${Math.round(state.radius / 5)}px` : null);
updateTextImage.call($$);
text.attr("transform", function(d) {
return $$.transformForArcLabel.bind($$)(this, d);
}).transition().duration(duration).style("opacity", (d) => $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? null : "0");
hasMultiArcGauge && text.attr("dy", "-.1em");
}
main.select(`.${$ARC.chartArcsTitle}`).style("opacity", $$.hasType("donut") || hasGauge ? null : "0");
if (hasGauge) {
const isFullCircle = config.gauge_fullCircle;
isFullCircle && text?.attr("dy", `${hasMultiArcGauge ? 0 : Math.round(state.radius / 14)}`);
if (config.gauge_label_show) {
arcs.select(`.${$GAUGE.chartArcsGaugeUnit}`).attr("dy", `${isFullCircle ? 1.5 : .75}em`).text(config.gauge_units);
arcs.select(`.${$GAUGE.chartArcsGaugeMin}`).attr("dx", `${-1 * (state.innerRadius + (state.radius - state.innerRadius) / (isFullCircle ? 1 : 2))}px`).attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_min, false));
!isFullCircle && arcs.select(`.${$GAUGE.chartArcsGaugeMax}`).attr("dx", `${state.innerRadius + (state.radius - state.innerRadius) / 2}px`).attr("dy", "1.2em").text($$.textForGaugeMinMax(config.gauge_max, true));
}
}
isLabelWithLine.call($$) && redrawArcLabelLines.call($$, duration);
},
/**
* Get Arc element by id or index
* @param {string|number} value id or index of Arc
* @returns {d3Selection} Arc path element
* @private
*/
getArcElementByIdOrIndex(value) {
const { $el: { arcs } } = this;
const filterFn = isNumber(value) ? (d) => d.index === value : (d) => d.data.id === value;
return arcs?.selectAll(`.${$COMMON.target} path`).filter(filterFn);
}
};
//#endregion
export { arc_default as default };