From 4063c8a0f4d441589116759b32f2b214fad46154 Mon Sep 17 00:00:00 2001 From: Eric Yang <59426533+hlyang397@users.noreply.github.com> Date: Sat, 12 Sep 2020 00:48:49 +0800 Subject: [PATCH 1/6] feat: create options for tick rotation (#770) * feat: create options for tick rotation - new enums and configuration - control x-axis tick rotation depending on configuration * refactor: change TickRotations DEPENDING to AUTO * refactor: avoid extra calculation for shouldRotateTicks * refactor: limit top/bottom axis tick rotation to top/bottom zoom bar only * refactor: tick rotation don't depend on zoom --- packages/core/src/components/axes/axis.ts | 118 ++++++++------------ packages/core/src/interfaces/axis-scales.ts | 6 +- packages/core/src/interfaces/enums.ts | 9 ++ 3 files changed, 63 insertions(+), 70 deletions(-) diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts index a0068d7cb1..2fe6e2336c 100644 --- a/packages/core/src/components/axes/axis.ts +++ b/packages/core/src/components/axes/axis.ts @@ -10,6 +10,7 @@ import { import { Tools } from "../../tools"; import { ChartModel } from "../../model"; import { DOMUtils } from "../../services"; +import { TickRotations } from "../../interfaces/enums"; import * as Configuration from "../../configuration"; import { computeTimeIntervalName, @@ -29,9 +30,6 @@ export class Axis extends Component { scale: any; scaleType: ScaleTypes; - // Track whether zoom domain needs to update in a render - zoomDomainChanging = false; - constructor(model: ChartModel, services: any, configs?: any) { super(model, services, configs); @@ -40,31 +38,8 @@ export class Axis extends Component { } this.margins = this.configs.margins; - this.init(); - } - - init() { - this.services.events.addEventListener( - Events.ZoomBar.SELECTION_START, - this.handleZoomBarSelectionStart - ); - this.services.events.addEventListener( - Events.ZoomBar.SELECTION_END, - this.handleZoomBarSelectionEnd - ); } - handleZoomBarSelectionStart = () => { - this.zoomDomainChanging = true; - }; - - handleZoomBarSelectionEnd = () => { - this.zoomDomainChanging = false; - // need another update after zoom bar selection is completed - // to make sure the tick rotation is calculated correctly - this.services.events.dispatchEvent(Events.Model.UPDATE); - }; - render(animate = true) { const { position: axisPosition } = this.configs; const options = this.model.getOptions(); @@ -439,41 +414,56 @@ export class Axis extends Component { axisPosition === AxisPositions.BOTTOM || axisPosition === AxisPositions.TOP ) { - let rotateTicks = false; - - // If we're dealing with a discrete scale type - // We're able to grab the spacing between the ticks - if (scale.step) { - const textNodes = invisibleAxisRef - .selectAll("g.tick text") - .nodes(); - - // If any ticks are any larger than the scale step size - rotateTicks = textNodes.some( - (textNode) => - DOMUtils.getSVGElementSize(textNode, { useBBox: true }) - .width >= scale.step() - ); - } else { - // When dealing with a continuous scale - // We need to calculate an estimated size of the ticks - const minTickSize = - Tools.getProperty( - axisOptions, - "ticks", - "rotateIfSmallerThan" - ) || Configuration.axis.ticks.rotateIfSmallerThan; - const ticksNumber = isTimeScaleType - ? axis.tickValues().length - : scale.ticks().length; - const estimatedTickSize = width / ticksNumber / 2; - rotateTicks = isTimeScaleType - ? estimatedTickSize < minTickSize * 2 // datetime tick could be very long - : estimatedTickSize < minTickSize; + let shouldRotateTicks = false; + // user could decide if tick rotation is required during zoom domain changing + const tickRotation = Tools.getProperty( + axisOptions, + "ticks", + "rotation" + ); + + if (tickRotation === TickRotations.ALWAYS) { + shouldRotateTicks = true; + } else if (tickRotation === TickRotations.NEVER) { + shouldRotateTicks = false; + } else if (!tickRotation || tickRotation === TickRotations.AUTO) { + // if the option is not set or set to AUTO + + // depending on if tick rotation is necessary by calculating space + // If we're dealing with a discrete scale type + // We're able to grab the spacing between the ticks + if (scale.step) { + const textNodes = invisibleAxisRef + .selectAll("g.tick text") + .nodes(); + + // If any ticks are any larger than the scale step size + shouldRotateTicks = textNodes.some( + (textNode) => + DOMUtils.getSVGElementSize(textNode, { + useBBox: true + }).width >= scale.step() + ); + } else { + // When dealing with a continuous scale + // We need to calculate an estimated size of the ticks + const minTickSize = + Tools.getProperty( + axisOptions, + "ticks", + "rotateIfSmallerThan" + ) || Configuration.axis.ticks.rotateIfSmallerThan; + const ticksNumber = isTimeScaleType + ? axis.tickValues().length + : scale.ticks().length; + const estimatedTickSize = width / ticksNumber / 2; + shouldRotateTicks = isTimeScaleType + ? estimatedTickSize < minTickSize * 2 // datetime tick could be very long + : estimatedTickSize < minTickSize; + } } - // always rotate ticks if zoomDomain is changing to avoid rotation flips during zoomDomain changing - if (rotateTicks || this.zoomDomainChanging) { + if (shouldRotateTicks) { if (!isNumberOfTicksProvided) { axis.ticks( this.getNumberOfFittingTicks( @@ -690,15 +680,5 @@ export class Axis extends Component { .on("mouseover", null) .on("mousemove", null) .on("mouseout", null); - - // Remove zoom bar event listeners - this.services.events.removeEventListener( - Events.ZoomBar.SELECTION_START, - this.handleZoomBarSelectionStart - ); - this.services.events.removeEventListener( - Events.ZoomBar.SELECTION_END, - this.handleZoomBarSelectionEnd - ); } } diff --git a/packages/core/src/interfaces/axis-scales.ts b/packages/core/src/interfaces/axis-scales.ts index 63e05e2f3d..0939c92c42 100644 --- a/packages/core/src/interfaces/axis-scales.ts +++ b/packages/core/src/interfaces/axis-scales.ts @@ -1,4 +1,4 @@ -import { ScaleTypes } from "./enums"; +import { ScaleTypes, TickRotations } from "./enums"; import { AxisDomain } from "d3"; import { Locale } from "date-fns"; import { ThresholdOptions } from "./components"; @@ -74,6 +74,10 @@ export interface AxisOptions { * before getting rotated (in pixels) */ rotateIfSmallerThan?: number; + /** + * when to rotate ticks + */ + rotation?: TickRotations; /** * function to format the ticks */ diff --git a/packages/core/src/interfaces/enums.ts b/packages/core/src/interfaces/enums.ts index d30d5dd2ba..d4e930910e 100644 --- a/packages/core/src/interfaces/enums.ts +++ b/packages/core/src/interfaces/enums.ts @@ -163,3 +163,12 @@ export enum Statuses { WARNING = "warning", DANGER = "danger" } + +/** + * enum of axis ticks rotation + */ +export enum TickRotations { + ALWAYS = "always", + AUTO = "auto", + NEVER = "never" +} From 313194217318719152d6a14c2a3cba957b8fc009 Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Sat, 12 Sep 2020 00:50:14 +0800 Subject: [PATCH 2/6] feat: enable or disable scatter dot on charts except scatter chart (#769) * feat: enable or disable scatter dot on charts except scatter chart * refactor: rename variable * fix: always enable scatter dot for bubble chart * refactor: have enabled option within points --- .../src/components/graphs/scatter-stacked.ts | 7 ++++ .../core/src/components/graphs/scatter.ts | 5 +++ packages/core/src/configuration.ts | 33 ++++++++++--------- packages/core/src/interfaces/charts.ts | 5 +++ 4 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts index c06ab10611..475fe25345 100644 --- a/packages/core/src/components/graphs/scatter-stacked.ts +++ b/packages/core/src/components/graphs/scatter-stacked.ts @@ -1,11 +1,18 @@ // Internal Imports import { Scatter } from "./scatter"; import { Roles } from "../../interfaces"; +import { Tools } from "../../tools"; export class StackedScatter extends Scatter { type = "scatter-stacked"; render(animate: boolean) { + const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "scatterDotEnabled"); + if (!this.configs.alwaysEnableScatterDot) { + if (!isScatterEnabled) { + return; + } + } // Grab container SVG const svg = this.getContainerSVG({ withinChartClip: true }); diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index 2008411c8e..f1fa52f612 100644 --- a/packages/core/src/components/graphs/scatter.ts +++ b/packages/core/src/components/graphs/scatter.ts @@ -51,6 +51,11 @@ export class Scatter extends Component { } render(animate: boolean) { + const isScatterEnabled = Tools.getProperty(this.model.getOptions(), "points", "enabled") || Tools.getProperty(this.model.getOptions(), "bubble", "enabled"); + if (!isScatterEnabled) { + return; + } + // Grab container SVG const svg = this.getContainerSVG({ withinChartClip: true }); diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 23e85f607e..42da444f03 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -197,14 +197,28 @@ const stackedBarChart: StackedBarChartOptions = Tools.merge({}, baseBarChart, { } as StackedBarOptions) } as BarChartOptions); +/** + * options specific to scatter charts + */ +const scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, { + points: { + // default point radius to 4 + radius: 4, + fillOpacity: 0.3, + filled: true, + enabled: true + } +} as ScatterChartOptions); + /** * options specific to line charts */ -const lineChart: LineChartOptions = Tools.merge({}, axisChart, { +const lineChart: LineChartOptions = Tools.merge({}, scatterChart, { points: { // default point radius to 3 radius: 3, - filled: false + filled: false, + enabled: true } } as LineChartOptions); @@ -222,18 +236,6 @@ const areaChart: AreaChartOptions = Tools.merge({}, lineChart, { */ const stackedAreaChart = areaChart; -/** - * options specific to scatter charts - */ -const scatterChart: ScatterChartOptions = Tools.merge({}, axisChart, { - points: { - // default point radius to 4 - radius: 4, - fillOpacity: 0.3, - filled: true - } -} as ScatterChartOptions); - /** * options specific to bubble charts */ @@ -250,7 +252,8 @@ const bubbleChart: BubbleChartOptions = Tools.merge({}, axisChart, { (smallerChartDimension * 25) / 400 ]; }, - fillOpacity: 0.2 + fillOpacity: 0.2, + enabled: true } } as BubbleChartOptions); diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts index 112f9dd07c..357bd8a8bb 100644 --- a/packages/core/src/interfaces/charts.ts +++ b/packages/core/src/interfaces/charts.ts @@ -147,6 +147,7 @@ export interface ScatterChartOptions extends AxisChartOptions { radius: number; fillOpacity?: number; filled?: boolean; + enabled?: boolean; }; } @@ -171,6 +172,10 @@ export interface BubbleChartOptions extends AxisChartOptions { * Opacity of the fills used within each circle */ fillOpacity?: number; + /** + * enabled scatter dot or not + */ + enabled?: boolean; }; } From 1362a06f4747979a759fdf4b932262d6031d604e Mon Sep 17 00:00:00 2001 From: natashadecoste Date: Fri, 11 Sep 2020 12:51:23 -0400 Subject: [PATCH 3/6] Merge pull request #780 from natashadecoste/fix-meter-max-val * chore(angular): add angular 9 dependency versions to peerDependencies * fix(meter): fix values over 100 to be max value * remove peak over 100 values * update status class binding Co-authored-by: Eliad Moosavi --- .../core/src/components/essentials/title-meter.ts | 2 +- packages/core/src/components/graphs/gauge.ts | 2 +- packages/core/src/components/graphs/meter.ts | 14 +++++++------- packages/core/src/model-meter.ts | 6 +++++- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/core/src/components/essentials/title-meter.ts b/packages/core/src/components/essentials/title-meter.ts index 929f59e89c..e2265cdd34 100644 --- a/packages/core/src/components/essentials/title-meter.ts +++ b/packages/core/src/components/essentials/title-meter.ts @@ -73,7 +73,7 @@ export class MeterTitle extends Title { // create a group for the icon/inner path const statusGroup = DOMUtils.appendOrSelect(svg, `g.status-indicator`) - .classed(`status--${status}`, status !== null) + .attr("class", status !== null ? `status-indicator status--${status}` : "") .attr("transform", `translate(${containerWidth - radius}, 0)`); const data = status ? [status] : []; diff --git a/packages/core/src/components/graphs/gauge.ts b/packages/core/src/components/graphs/gauge.ts index 376877d1c5..0d1cbbc7dd 100644 --- a/packages/core/src/components/graphs/gauge.ts +++ b/packages/core/src/components/graphs/gauge.ts @@ -330,7 +330,7 @@ export class Gauge extends Component { // Draw the arrow with status const status = Tools.getProperty(options, "gauge", "status"); DOMUtils.appendOrSelect(deltaArrow, "polygon.gauge-delta-arrow") - .classed(`status--${status}`, status !== null) + .attr("class", status !== null ? `gauge-delta-arrow status--${status}` : "") .attr("fill", () => (status === null ? "currentColor" : null)) .attr("points", self.getArrow(delta)); diff --git a/packages/core/src/components/graphs/meter.ts b/packages/core/src/components/graphs/meter.ts index 1d81bdb51d..19ab4bb35f 100644 --- a/packages/core/src/components/graphs/meter.ts +++ b/packages/core/src/components/graphs/meter.ts @@ -33,10 +33,10 @@ export class Meter extends Component { .attr("height", Tools.getProperty(options, "meter", "height")); // value larger than 100 will display as 100% on meter chart - const dataset = data.value <= 100 ? data : (data["value"] = 100); + const maximumBarWidth = data.value >= 100; // rect with the value binded - const value = svg.selectAll("rect.value").data([dataset]); + const value = svg.selectAll("rect.value").data([data]); // if user provided a color for the bar, we dont want to attach a status class const userProvidedScale = Tools.getProperty(options, "color", "scale"); @@ -50,14 +50,14 @@ export class Meter extends Component { .attr("x", 0) .attr("y", 0) .attr("height", Tools.getProperty(options, "meter", "height")) - .classed(`status--${status}`, status != null && !userProvidedScale) + .attr("class", status != null && !userProvidedScale ? `value status--${status}` : "") .transition( this.services.transitions.getTransition( "meter-bar-update", animate ) ) - .attr("width", (d) => xScale(d.value)) + .attr("width", (d) => maximumBarWidth ? xScale(100) : xScale(d.value)) .attr("fill", (d) => self.model.getFillColor(d[groupMapsTo])) // a11y .attr("role", Roles.GRAPHICS_SYMBOL) @@ -69,11 +69,11 @@ export class Meter extends Component { // update the peak if it is less than the value, it should be equal to the value const updatedPeak = - peakValue !== null && peakValue < dataset.value - ? dataset.value + peakValue !== null && peakValue < data.value + ? data.value : peakValue; // dont display peak if there isnt one - const peakData = updatedPeak === null ? [] : [updatedPeak]; + const peakData = updatedPeak === null || maximumBarWidth ? [] : [updatedPeak]; // if a peak is supplied within the domain, we want to render it const peak = svg.selectAll("line.peak").data(peakData); diff --git a/packages/core/src/model-meter.ts b/packages/core/src/model-meter.ts index 478d2e214a..316e634e31 100644 --- a/packages/core/src/model-meter.ts +++ b/packages/core/src/model-meter.ts @@ -52,6 +52,9 @@ export class MeterChartModel extends ChartModel { const options = this.getOptions(); const dataValue = this.getDisplayData().value; + // use max value if the percentage is bigger than 100% + const boundedValue = dataValue > 100 ? 100 : dataValue; + // user needs to supply ranges const allRanges = Tools.getProperty( options, @@ -59,10 +62,11 @@ export class MeterChartModel extends ChartModel { "status", "ranges" ); + if (allRanges) { const result = allRanges.filter( (step) => - step.range[0] <= dataValue && dataValue <= step.range[1] + step.range[0] <= boundedValue && boundedValue <= step.range[1] ); if (result.length > 0) { return result[0].status; From 5bdaa57cf8cd4c26dc0242b00eec190a83216c6e Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Fri, 11 Sep 2020 17:03:03 +0000 Subject: [PATCH 4/6] v0.37.0 --- CHANGELOG.md | 12 ++++++++++++ lerna.json | 2 +- packages/angular/CHANGELOG.md | 8 ++++++++ packages/angular/package.json | 4 ++-- packages/core/CHANGELOG.md | 12 ++++++++++++ packages/core/package.json | 2 +- packages/react/CHANGELOG.md | 8 ++++++++ packages/react/package.json | 4 ++-- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 4 ++-- packages/vue/CHANGELOG.md | 8 ++++++++ packages/vue/package.json | 4 ++-- 12 files changed, 66 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 271512761e..ae4d1128e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + + +### Features + +* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154)) +* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009)) + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts-monorepo diff --git a/lerna.json b/lerna.json index 1b0280b5c2..a0c22748b9 100644 --- a/lerna.json +++ b/lerna.json @@ -12,5 +12,5 @@ ] } }, - "version": "0.36.4" + "version": "0.37.0" } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 2fe3fd4ea3..778bc7fa0c 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts-angular diff --git a/packages/angular/package.json b/packages/angular/package.json index 800e741376..848172d914 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-angular", - "version": "0.36.4", + "version": "0.37.0", "description": "Carbon charting components for Angular", "main": "index.js", "scripts": { @@ -40,7 +40,7 @@ "scss" ], "dependencies": { - "@carbon/charts": "^0.36.4" + "@carbon/charts": "^0.37.0" }, "peerDependencies": { "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index f0c0a73da8..e2518f6404 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + + +### Features + +* create options for tick rotation ([#770](https://github.com/carbon-design-system/carbon-charts/issues/770)) ([4063c8a](https://github.com/carbon-design-system/carbon-charts/commit/4063c8a0f4d441589116759b32f2b214fad46154)) +* enable or disable scatter dot on charts except scatter chart ([#769](https://github.com/carbon-design-system/carbon-charts/issues/769)) ([3131942](https://github.com/carbon-design-system/carbon-charts/commit/313194217318719152d6a14c2a3cba957b8fc009)) + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts diff --git a/packages/core/package.json b/packages/core/package.json index 63ea8a65af..4200d2c27b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts", - "version": "0.36.4", + "version": "0.37.0", "description": "Carbon charting components", "main": "./bundle.js", "module": "./index.js", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index ce29b267f7..b1f99ed3a3 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + +**Note:** Version bump only for package @carbon/charts-react + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts-react diff --git a/packages/react/package.json b/packages/react/package.json index d21e9fe272..979f6ac376 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-react", - "version": "0.36.4", + "version": "0.37.0", "description": "Carbon charting components for React", "main": "./bundle.js", "module": "./index.js", @@ -46,7 +46,7 @@ }, "homepage": "https://github.com/carbon-design-system/carbon-charts#readme", "dependencies": { - "@carbon/charts": "^0.36.4" + "@carbon/charts": "^0.37.0" }, "peerDependencies": { "react": "^16.6.3", diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index 36752e9a04..d7be3be7c5 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + +**Note:** Version bump only for package @carbon/charts-svelte + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts-svelte diff --git a/packages/svelte/package.json b/packages/svelte/package.json index e0b0fc0bb0..2fd46e8491 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-svelte", - "version": "0.36.4", + "version": "0.37.0", "description": "Carbon charting components for Svelte", "main": "./bundle.js", "module": "./index.js", @@ -47,7 +47,7 @@ }, "homepage": "https://github.com/carbon-design-system/carbon-charts#readme", "dependencies": { - "@carbon/charts": "^0.36.4" + "@carbon/charts": "^0.37.0" }, "peerDependencies": { "svelte": "^3.20.x" diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 6da380a32b..423025b3f3 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + ## [0.36.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.3...v0.36.4) (2020-09-10) **Note:** Version bump only for package @carbon/charts-vue diff --git a/packages/vue/package.json b/packages/vue/package.json index 70d1b4854a..7db95ced5d 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-vue", - "version": "0.36.4", + "version": "0.37.0", "description": "Carbon charting components for Vue", "main": "charts-vue.umd.min.js", "scripts": { @@ -14,7 +14,7 @@ "clean": "rm -rf dist demo/bundle" }, "dependencies": { - "@carbon/charts": "^0.36.4", + "@carbon/charts": "^0.37.0", "vue": "2.5.21" }, "devDependencies": { From 7de3fb99d85cd474060416bffde5a6f90bce13a5 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Mon, 14 Sep 2020 08:05:18 -0700 Subject: [PATCH 5/6] Merge pull request #800 from metonym/fix-svelte-base-chart * fix(svelte): rewrite BaseChart to reload chart instance Fixes #799 * refactor(svelte): remove unnecessary afterUpdate method * chore(svelte): keep the PR scoped --- packages/svelte/src/BaseChart.svelte | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/svelte/src/BaseChart.svelte b/packages/svelte/src/BaseChart.svelte index 4bcf201d39..bdf1174c48 100644 --- a/packages/svelte/src/BaseChart.svelte +++ b/packages/svelte/src/BaseChart.svelte @@ -8,17 +8,17 @@ const dispatch = createEventDispatcher(); const id = "chart-" + Math.random().toString(36); - let ref = undefined; - let chart = undefined; + let ref = null; + let chart = null; onMount(() => { /** * CodeSandbox does not resolve Svelte components from the `svelte` package.json entry. * This causes `bind:ref` to be `undefined`; the chart can't mount to the element. - * + * * We fallback to manually querying the DOM for the chart holder element because * CodeSandbox does not use uncompiled Svelte source code. - * + * * See https://github.com/sveltejs/svelte/issues/2937 */ const element = ref || document.getElementById(id); @@ -30,7 +30,8 @@ return () => { if (chart) { - chart.destroy(); + chart.components.forEach((component) => component.destroy()); + chart = null; dispatch("destroy"); } }; From 67675cf7a880d02d4ff1a91b45e3883ae1ef45aa Mon Sep 17 00:00:00 2001 From: carbon-bot Date: Mon, 14 Sep 2020 15:16:19 +0000 Subject: [PATCH 6/6] v0.37.1 --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- packages/angular/CHANGELOG.md | 8 ++++++++ packages/angular/package.json | 4 ++-- packages/core/CHANGELOG.md | 8 ++++++++ packages/core/package.json | 2 +- packages/react/CHANGELOG.md | 8 ++++++++ packages/react/package.json | 4 ++-- packages/svelte/CHANGELOG.md | 8 ++++++++ packages/svelte/package.json | 4 ++-- packages/vue/CHANGELOG.md | 8 ++++++++ packages/vue/package.json | 4 ++-- 12 files changed, 58 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ae4d1128e2..a1c9525dd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts-monorepo + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) diff --git a/lerna.json b/lerna.json index a0c22748b9..0a787790df 100644 --- a/lerna.json +++ b/lerna.json @@ -12,5 +12,5 @@ ] } }, - "version": "0.37.0" + "version": "0.37.1" } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 778bc7fa0c..30b1317453 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) **Note:** Version bump only for package @carbon/charts-angular diff --git a/packages/angular/package.json b/packages/angular/package.json index 848172d914..81c5adb476 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-angular", - "version": "0.37.0", + "version": "0.37.1", "description": "Carbon charting components for Angular", "main": "index.js", "scripts": { @@ -40,7 +40,7 @@ "scss" ], "dependencies": { - "@carbon/charts": "^0.37.0" + "@carbon/charts": "^0.37.1" }, "peerDependencies": { "@angular/common": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index e2518f6404..97a06d3d84 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) diff --git a/packages/core/package.json b/packages/core/package.json index 4200d2c27b..9a95552b4f 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts", - "version": "0.37.0", + "version": "0.37.1", "description": "Carbon charting components", "main": "./bundle.js", "module": "./index.js", diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index b1f99ed3a3..1ec70fd9f1 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts-react + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) **Note:** Version bump only for package @carbon/charts-react diff --git a/packages/react/package.json b/packages/react/package.json index 979f6ac376..bdb418a386 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-react", - "version": "0.37.0", + "version": "0.37.1", "description": "Carbon charting components for React", "main": "./bundle.js", "module": "./index.js", @@ -46,7 +46,7 @@ }, "homepage": "https://github.com/carbon-design-system/carbon-charts#readme", "dependencies": { - "@carbon/charts": "^0.37.0" + "@carbon/charts": "^0.37.1" }, "peerDependencies": { "react": "^16.6.3", diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md index d7be3be7c5..7f616425c8 100644 --- a/packages/svelte/CHANGELOG.md +++ b/packages/svelte/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts-svelte + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) **Note:** Version bump only for package @carbon/charts-svelte diff --git a/packages/svelte/package.json b/packages/svelte/package.json index 2fd46e8491..ee00ccd8a8 100644 --- a/packages/svelte/package.json +++ b/packages/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-svelte", - "version": "0.37.0", + "version": "0.37.1", "description": "Carbon charting components for Svelte", "main": "./bundle.js", "module": "./index.js", @@ -47,7 +47,7 @@ }, "homepage": "https://github.com/carbon-design-system/carbon-charts#readme", "dependencies": { - "@carbon/charts": "^0.37.0" + "@carbon/charts": "^0.37.1" }, "peerDependencies": { "svelte": "^3.20.x" diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 423025b3f3..99ade74cad 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.37.1](https://github.com/carbon-design-system/carbon-charts/compare/v0.37.0...v0.37.1) (2020-09-14) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + # [0.37.0](https://github.com/carbon-design-system/carbon-charts/compare/v0.36.4...v0.37.0) (2020-09-11) **Note:** Version bump only for package @carbon/charts-vue diff --git a/packages/vue/package.json b/packages/vue/package.json index 7db95ced5d..76eecdaeff 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-vue", - "version": "0.37.0", + "version": "0.37.1", "description": "Carbon charting components for Vue", "main": "charts-vue.umd.min.js", "scripts": { @@ -14,7 +14,7 @@ "clean": "rm -rf dist demo/bundle" }, "dependencies": { - "@carbon/charts": "^0.37.0", + "@carbon/charts": "^0.37.1", "vue": "2.5.21" }, "devDependencies": {