diff --git a/package-lock.json b/package-lock.json index 2399ddd4f5..4ab5b14d95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -979,6 +979,17 @@ "string-width": "^2.1.0", "strip-ansi": "^4.0.0", "through": "^2.3.6" + }, + "dependencies": { + "rxjs": { + "version": "6.3.3", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz", + "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + } } }, "is-fullwidth-code-point": { @@ -1616,17 +1627,6 @@ "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", "dev": true }, - "babel-polyfill": { - "version": "6.23.0", - "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz", - "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", - "dev": true, - "requires": { - "babel-runtime": "^6.22.0", - "core-js": "^2.4.0", - "regenerator-runtime": "^0.10.0" - } - }, "babel-runtime": { "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", @@ -1635,14 +1635,6 @@ "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" - }, - "dependencies": { - "regenerator-runtime": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true - } } }, "balanced-match": { @@ -2329,9 +2321,9 @@ "dev": true }, "core-js": { - "version": "2.5.7", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", - "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==", + "version": "2.5.4", + "resolved": "http://registry.npmjs.org/core-js/-/core-js-2.5.4.tgz", + "integrity": "sha1-8si/GB8qgLkvNgEhQpzmOi8K6uA=", "dev": true }, "core-util-is": { @@ -5238,6 +5230,17 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", "dev": true }, + "babel-polyfill": { + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz", + "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=", + "dev": true, + "requires": { + "babel-runtime": "^6.22.0", + "core-js": "^2.4.0", + "regenerator-runtime": "^0.10.0" + } + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -5309,6 +5312,12 @@ "mimic-fn": "^1.0.0" } }, + "regenerator-runtime": { + "version": "0.10.5", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", + "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "dev": true + }, "restore-cursor": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz", @@ -6088,9 +6097,9 @@ } }, "regenerator-runtime": { - "version": "0.10.5", - "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", - "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg=", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", "dev": true }, "regex-cache": { @@ -6294,15 +6303,6 @@ "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=", "dev": true }, - "rxjs": { - "version": "6.3.3", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.3.3.tgz", - "integrity": "sha512-JTWmoY9tWCs7zvIk/CvRjhjGaOd+OVBM987mxFo+OW66cGpdKjZcpmc74ES1sB//7Kl/PAe8+wEakuhG4pcgOw==", - "dev": true, - "requires": { - "tslib": "^1.9.0" - } - }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss index dbe131daf3..c64dc083ea 100644 --- a/packages/core/demo/index.scss +++ b/packages/core/demo/index.scss @@ -5,6 +5,8 @@ $default_transition: all .1s ease-out; } body { + margin: 0; + background-color: #fbfbfb; font-family: "IBM Plex Sans", Arial, sans-serif; } @@ -47,12 +49,6 @@ $due_blue: #0063ff; outline: none; } -html, -body { - margin: 0; - background: #f4f7fa; -} - header.m-demo-header { margin-bottom: 20px; padding: 50px 0; @@ -114,7 +110,8 @@ header.m-demo-header { margin-top: 20px; } .chart-holder { - border: 1px solid rgba(24, 62, 117, 0.2); + background-color: #fff; + // border: 1px solid rgba(24, 62, 117, 0.2); box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1); margin: 0 auto 60px auto; display: block; diff --git a/packages/core/src/base-axis-chart.ts b/packages/core/src/base-axis-chart.ts index 37b29c300d..95d347fbf1 100644 --- a/packages/core/src/base-axis-chart.ts +++ b/packages/core/src/base-axis-chart.ts @@ -413,8 +413,9 @@ export class BaseAxisChart extends BaseChart { if (e.value) { return e.value; } console.error("Missing threshold value: ", e); }); - // for some reason tickValues ignore the first element of the array - // passed to it so this workaround + + // TickValues seem to ignore the first element of the array + // This workaround is a temporary solution thresholdTickValues.unshift(0); yGrid.tickValues(thresholdTickValues); } @@ -428,14 +429,14 @@ export class BaseAxisChart extends BaseChart { this.cleanGrid(g); if (thresholds && thresholds.length > 0) { - this.fillTickThresholds(g); + this.addOrUpdateThresholds(g); } } - fillTickThresholds(yGrid) { + addOrUpdateThresholds(yGrid, animate?) { const { thresholds } = this.options.scales.y; const thresholdDimensions = []; - const width = yGrid.node().getBBox().width; + const width = this.getChartSize().width; let prevBase = this.y(0); let gThresholdContainer = (yGrid.select("g.threshold-container").nodes().length > 0) @@ -468,8 +469,7 @@ export class BaseAxisChart extends BaseChart { // update gThresholdContainer - .transition() - .duration(500) + .transition(animate === false ? this.getInstantTransition() : this.getDefaultTransition()) .attr("height", d => d.height) .attr("width", d => d.width) .attr("y", d => d.y ) @@ -478,21 +478,18 @@ export class BaseAxisChart extends BaseChart { // enter gThresholdContainer .enter() - .append("rect") - .attr("height", d => d.height) - .attr("width", d => d.width) - .attr("y", d => d.y ) - .style("fill", d => Configuration.scales.y.thresholds.colors[d.theme]) - .transition() - .duration(3000); + .append("rect") + .attr("height", d => d.height) + .attr("width", d => d.width) + .attr("y", d => d.y ) + .style("fill", d => Configuration.scales.y.thresholds.colors[d.theme]); // exit gThresholdContainer .exit() - .transition(this.getDefaultTransition()) - .style("opacity", 0) - .duration(300) - .remove(); + .transition(this.getDefaultTransition()) + .style("opacity", 0) + .remove(); } updateXandYGrid(noAnimation?: boolean) { @@ -543,13 +540,12 @@ export class BaseAxisChart extends BaseChart { this.cleanGrid(g_yGrid); if (thresholds && thresholds.length > 0) { - this.fillTickThresholds(g_yGrid); + this.addOrUpdateThresholds(g_yGrid, !noAnimation); } - }, 0); } - cleanGrid (g) { + cleanGrid(g) { g.selectAll("line") .attr("stroke", Configuration.grid.strokeColor); g.selectAll("text").style("display", "none").remove(); diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 7894813aba..1f36ceff17 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -121,9 +121,9 @@ export const scales = { numberOfTicks: 5, thresholds: { colors: { - "danger": "#fdf4f4", - "success": "#f3f9f6", - "warning": "#fffbeb" + "danger": "rgba(230, 35, 37, 0.15)", + "success": "rgba(254, 213, 0, 0.15)", + "warning": "rgba(0, 136, 75, 0.15)" } }