Skip to content

Commit

Permalink
feat(all): contain inline css prop setting
Browse files Browse the repository at this point in the history
Removed setting css props, which works as same way with default value.
There's no need to set explicitly.

- display: block
- visibility: visible
- opacity: 1
- fill-opacity: 1

Fix #2076
  • Loading branch information
netil authored May 18, 2021
1 parent b064cc1 commit fde6a89
Show file tree
Hide file tree
Showing 28 changed files with 152 additions and 162 deletions.
2 changes: 1 addition & 1 deletion src/Chart/api/show.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function showHide(show: boolean, targetIdsValue: string[], options: any): void {
$$[`${show ? "remove" : "add"}HiddenTargetIds`](targetIds);

const targets = $$.$el.svg.selectAll($$.selectorTargets(targetIds));
const opacity = show ? "1" : "0";
const opacity = show ? null : "0";

show && targets.style("display", null);

Expand Down
2 changes: 1 addition & 1 deletion src/Chart/api/subchart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default {
$target = subchart.main.selectAll(`.${CLASS.target}`);
}

$target.style("opacity", "1");
$target.style("opacity", null);
subchart.main.style("display", null);

this.flush();
Expand Down
10 changes: 5 additions & 5 deletions src/ChartInternal/Axis/Axis.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ class Axis {
return res;
})
.attr("transform", $$.getTranslate(v))
.style("visibility", config[`axis_${v}_show`] ? "visible" : "hidden");
.style("visibility", config[`axis_${v}_show`] ? null : "hidden");

axis[v].append("text")
.attr("class", classLabel)
Expand Down Expand Up @@ -219,7 +219,7 @@ class Axis {
if (g.empty()) {
g = main.append("g")
.attr("class", className)
.style("visibility", config[`axis_${id}_show`] ? "visible" : "hidden")
.style("visibility", config[`axis_${id}_show`] ? null : "hidden")
.call(v);
} else {
axesConfig[i].domain && scale.domain(axesConfig[i].domain);
Expand Down Expand Up @@ -862,7 +862,7 @@ class Axis {
redraw(transitions, isHidden, isInit) {
const $$ = this.owner;
const {config, $el} = $$;
const opacity = isHidden ? "0" : "1";
const opacity = isHidden ? "0" : null;

["x", "y", "y2", "subX"].forEach(id => {
const axis = this[id];
Expand Down Expand Up @@ -989,10 +989,10 @@ class Axis {
}

tickText.each(function(d) {
this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : "block";
this.style.display = tickValues.indexOf(d) % intervalForCulling ? "none" : null;
});
} else {
tickText.style("display", "block");
tickText.style("display", null);
}

// set/unset x_axis_tick_clippath
Expand Down
5 changes: 2 additions & 3 deletions src/ChartInternal/Axis/AxisRenderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,7 @@ export default class AxisRenderer {
const tickEnter = tick
.enter()
.insert("g", ".domain")
.attr("class", "tick")
.style("opacity", "1");
.attr("class", "tick");

// MEMO: No exit transition. The reason is this transition affects max tick width calculation because old tick will be included in the ticks.
const tickExit = tick.exit().remove();
Expand Down Expand Up @@ -216,7 +215,7 @@ export default class AxisRenderer {
}

tickTransform(tickEnter, scale0);
tickTransform(helper.transitionise(tick).style("opacity", "1"), scale1);
tickTransform(helper.transitionise(tick).style("opacity", null), scale1);
}
});

Expand Down
6 changes: 3 additions & 3 deletions src/ChartInternal/ChartInternal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ export default class ChartInternal {
.filter(d => $$.isTargetToShow(d.id))
.transition()
.duration(config.transition_duration)
.style("opacity", "1");
.style("opacity", null);
}

getWithOption(options) {
Expand Down Expand Up @@ -616,12 +616,12 @@ export default class ChartInternal {
return withOptions;
}

initialOpacity(d): "1" | "0" {
initialOpacity(d): null | "0" {
const $$ = <any> this;
const {withoutFadeIn} = $$.state;

return $$.getBaseValue(d) !== null &&
withoutFadeIn[d.id] ? "1" : "0";
withoutFadeIn[d.id] ? null : "0";
}

bindResize(): void {
Expand Down
4 changes: 2 additions & 2 deletions src/ChartInternal/interactions/subchart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export default {
return;
}

const visibility = config.subchart_show ? "visible" : "hidden";
const visibility = config.subchart_show ? null : "hidden";
const clipId = `${clip.id}-subchart`;
const clipPath = $$.getClipPath(clipId);

Expand Down Expand Up @@ -289,7 +289,7 @@ export default {
const {config, $el: {subchart: {main}}, state} = $$;
const withTransition = !!duration;

main.style("visibility", config.subchart_show ? "visible" : "hidden");
main.style("visibility", config.subchart_show ? null : "hidden");

// subchart
if (config.subchart_show) {
Expand Down
16 changes: 8 additions & 8 deletions src/ChartInternal/internals/grid.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ export default {
grid.attr(id, state.xgridAttr[id])
.style("opacity", () => (
grid.attr(isRotated ? "y1" : "x1") === (isRotated ? state.height : 0) ?
"0" : "1"
"0" : null
));
});
});
Expand Down Expand Up @@ -166,7 +166,7 @@ export default {
!gridLines.main && $$.initGridLines();

// hide if arc type
grid.main.style("visibility", $$.hasArcType() ? "hidden" : "visible");
grid.main.style("visibility", $$.hasArcType() ? "hidden" : null);

$$.hideGridFocus();
$$.updateXGridLines(duration);
Expand Down Expand Up @@ -217,7 +217,7 @@ export default {
.duration(duration)
.text(d => d.text)
.transition()
.style("opacity", "1");
.style("opacity", null);

gridLines.x = xLines;
},
Expand Down Expand Up @@ -270,7 +270,7 @@ export default {
.attr("y1", isRotated ? 0 : yv)
.attr("y2", isRotated ? height : yv)
.transition()
.style("opacity", "1");
.style("opacity", null);

ygridLines.select("text")
.attr("text-anchor", getGridTextAnchor)
Expand All @@ -282,7 +282,7 @@ export default {
.attr("y", yv)
.text(d => d.text)
.transition()
.style("opacity", "1");
.style("opacity", null);

$el.gridLines.y = ygridLines;
},
Expand Down Expand Up @@ -311,8 +311,8 @@ export default {
.text(d => d.text);

return [
lines.style("opacity", "1"),
texts.style("opacity", "1")
lines.style("opacity", null),
texts.style("opacity", null)
];
},

Expand Down Expand Up @@ -372,7 +372,7 @@ export default {
const xx = $$.xx.bind($$);

focusEl
.style("visibility", "visible")
.style("visibility", null)
.data(dataToShow.concat(dataToShow))
.each(function(d) {
const el = d3Select(this);
Expand Down
31 changes: 8 additions & 23 deletions src/ChartInternal/internals/legend.ts
Original file line number Diff line number Diff line change
Expand Up @@ -244,16 +244,6 @@ export default {
) : 0;
},

/**
* Get the opacity of the legend
* @param {d3.selection} legendItem Legend item node
* @returns {string|null} opacity
* @private
*/
opacityForLegend(legendItem): string | null {
return legendItem.classed(CLASS.legendItemHidden) ? null : "1";
},

/**
* Get the opacity of the legend that is unfocused
* @param {d3.selection} legendItem Legend item node
Expand Down Expand Up @@ -281,8 +271,8 @@ export default {
.transition()
.duration(100)
.style("opacity", function() {
return (focus ? $$.opacityForLegend : $$.opacityForUnfocusedLegend)
.call($$, d3Select(this));
return focus ? null :
$$.opacityForUnfocusedLegend.call($$, d3Select(this));
});
},

Expand All @@ -298,9 +288,7 @@ export default {
.classed(CLASS.legendItemFocused, false)
.transition()
.duration(100)
.style("opacity", function() {
return $$.opacityForLegend(d3Select(this));
});
.style("opacity", null);
},

/**
Expand All @@ -316,7 +304,7 @@ export default {
config.legend_show = true;

$el.legend ?
$el.legend.style("visibility", "visible") :
$el.legend.style("visibility", null) :
$$.initLegend();

!$$.state.legendHasRendered && $$.updateLegend();
Expand All @@ -325,11 +313,9 @@ export default {
$$.removeHiddenLegendIds(targetIds);

$el.legend.selectAll($$.selectorLegends(targetIds))
.style("visibility", "visible")
.style("visibility", null)
.transition()
.style("opacity", function() {
return $$.opacityForLegend(d3Select(this));
});
.style("opacity", null);
},

/**
Expand Down Expand Up @@ -399,7 +385,7 @@ export default {

return itemClass + $$.generateClass(CLASS.legendItem, id);
})
.style("visibility", id => ($$.isLegendToShow(id) ? "visible" : "hidden"));
.style("visibility", id => ($$.isLegendToShow(id) ? null : "hidden"));

if (config.interaction_enabled) {
item
Expand All @@ -413,8 +399,7 @@ export default {
api.toggle(id);

d3Select(this)
.classed(CLASS.legendItemFocused, false)
.style("opacity", null);
.classed(CLASS.legendItemFocused, false);
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/ChartInternal/internals/region.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default {
}

// hide if arc type
region.main.style("visibility", $$.hasArcType() ? "hidden" : "visible");
region.main.style("visibility", $$.hasArcType() ? "hidden" : null);
// select <g> element

let list = region.main
Expand Down Expand Up @@ -64,7 +64,7 @@ export default {

return [
(withTransition ? regions.transition() : regions)
.style("fill-opacity", d => (isValue(d.opacity) ? d.opacity : "0.1"))
.style("fill-opacity", d => (isValue(d.opacity) ? d.opacity : null))
.on("end", function() {
// remove unnecessary rect after transition
d3Select(this.parentNode)
Expand Down
4 changes: 2 additions & 2 deletions src/ChartInternal/internals/text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ import {AxisType} from "../../../types/types";


export default {
opacityForText(d): "1" | "0" {
opacityForText(d): null | "0" {
const $$ = this;

return $$.isBarType(d) && !$$.meetsLabelThreshold(
Math.abs($$.getRatio("bar", d),), "bar"
) ? "0" : ($$.hasDataLabel ? "1" : "0");
) ? "0" : ($$.hasDataLabel ? null : "0");
},

/**
Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/internals/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export default {
if (!config.tooltip_contents.bindto) {
$el.tooltip.style("top", config.tooltip_init_position.top)
.style("left", config.tooltip_init_position.left)
.style("display", "block");
.style("display", null);
}
}
},
Expand Down
10 changes: 5 additions & 5 deletions src/ChartInternal/shape/arc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -407,7 +407,7 @@ export default {
.attr("d", $$.svgArc);

svg.selectAll(`${CLASS.arc}`)
.style("opacity", "1");
.style("opacity", null);
},

/**
Expand Down Expand Up @@ -581,7 +581,7 @@ export default {
mainArc
.attr("transform", d => (!$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""))
.style("opacity", function(d) {
return d === this._current ? "0" : "1";
return d === this._current ? "0" : null;
})
.each(() => {
state.transiting = true;
Expand Down Expand Up @@ -630,7 +630,7 @@ export default {
return color;
})
// Where gauge reading color would receive customization.
.style("opacity", "1")
.style("opacity", null)
.call(endall, function() {
if ($$.levelColor) {
const path = d3Select(this);
Expand Down Expand Up @@ -830,13 +830,13 @@ export default {
))
.transition()
.duration(duration)
.style("opacity", d => ($$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? "1" : "0"));
.style("opacity", d => ($$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? null : "0"));

hasMultiArcGauge && text.attr("dy", "-.1em");
}

main.select(`.${CLASS.chartArcsTitle}`)
.style("opacity", $$.hasType("donut") || hasGauge ? "1" : "0");
.style("opacity", $$.hasType("donut") || hasGauge ? null : "0");

if (hasGauge) {
const isFullCircle = config.gauge_fullCircle;
Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/shape/bar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export default {
(withTransition ? bar.transition(getRandom()) : bar)
.attr("d", drawFn)
.style("fill", this.color)
.style("opacity", "1")
.style("opacity", null)
];
},

Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/shape/candlestick.ts
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export default {

drawFn(d, i, g);
})
.style("opacity", "1")
.style("opacity", null)
];
},

Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/shape/gauge.ts
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default {

mainArcLabelLine
.style("fill", d => ($$.levelColor ? $$.levelColor(d.data.values[0].value) : $$.color(d.data)))
.style("display", config.gauge_label_show ? "" : "none")
.style("display", config.gauge_label_show ? null : "none")
.each(function(d) {
let lineLength = 0;
const lineThickness = 2;
Expand Down
2 changes: 1 addition & 1 deletion src/ChartInternal/shape/line.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ export default {
(withTransition ? line.transition(getRandom()) : line)
.attr("d", drawFn)
.style("stroke", this.color)
.style("opacity", "1")
.style("opacity", null)
];
},

Expand Down
Loading

0 comments on commit fde6a89

Please sign in to comment.