diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index bd9d4e0963..148d48a57d 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -1,18 +1,15 @@ # Change Log -All notable changes to this project will be documented in this file. -See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +All notable changes to this project will be documented in this file. See +[Conventional Commits](https://conventionalcommits.org) for commit guidelines. ## [0.34.5](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.4...v0.34.5) (2020-07-22) - ### Bug Fixes -* fix pie chart alignment ([#716](https://github.com/carbon-design-system/carbon-charts/issues/716)) ([638c331](https://github.com/carbon-design-system/carbon-charts/commit/638c331b7fa8fbc73cf557cf99a6b3af2435b492)) - - - - +- fix pie chart alignment + ([#716](https://github.com/carbon-design-system/carbon-charts/issues/716)) + ([638c331](https://github.com/carbon-design-system/carbon-charts/commit/638c331b7fa8fbc73cf557cf99a6b3af2435b492)) # Change Log @@ -23,18 +20,10 @@ All notable changes to this project will be documented in this file. See **Note:** Version bump only for package @carbon/charts - - - - ## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20) **Note:** Version bump only for package @carbon/charts - - - - ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15) **Note:** Version bump only for package @carbon/charts diff --git a/packages/core/demo/data/bar.ts b/packages/core/demo/data/bar.ts index 5e40d0cd66..3467920388 100644 --- a/packages/core/demo/data/bar.ts +++ b/packages/core/demo/data/bar.ts @@ -131,7 +131,7 @@ export const simpleBarCenteredLegendOptions = { legend: { alignment: "center" } -} +}; // Simple bar with long labels export const simpleBarLongLabelData = [ @@ -225,7 +225,7 @@ export const simpleHorizontalBarCenteredLegendOptions = { legend: { alignment: "center" } -} +}; export const simpleHorizontalBarLongLabelOptions = { title: "Simple horizontal bar (truncated labels)", diff --git a/packages/core/demo/data/donut.ts b/packages/core/demo/data/donut.ts index bf8ec2b070..835460b25b 100644 --- a/packages/core/demo/data/donut.ts +++ b/packages/core/demo/data/donut.ts @@ -26,7 +26,7 @@ export const donutCenteredOptions = { }, alignment: "center" } -} +}; // donut - empty state export const donutEmptyStateData = []; diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts index 92555c998e..e5c3482898 100644 --- a/packages/core/demo/data/line.ts +++ b/packages/core/demo/data/line.ts @@ -58,7 +58,7 @@ export const lineCenteredLegendOptions = { legend: { alignment: "center" } -} +}; export const lineLongLabelData = [ { group: "Dataset 1", key: "Qty", value: 34200 }, diff --git a/packages/core/demo/data/meter.ts b/packages/core/demo/data/meter.ts index 0c66c85cb3..ea113aa3ba 100644 --- a/packages/core/demo/data/meter.ts +++ b/packages/core/demo/data/meter.ts @@ -40,7 +40,6 @@ export const meterOptionsCustomColor = { height: "100px" }; - export const meterOptionsNoStatus = { title: "Meter Chart - no status", meter: { diff --git a/packages/core/demo/data/pie.ts b/packages/core/demo/data/pie.ts index df3b2e6e49..92d7c66dbe 100644 --- a/packages/core/demo/data/pie.ts +++ b/packages/core/demo/data/pie.ts @@ -23,7 +23,7 @@ export const pieCenteredOptions = { pie: { alignment: "center" } -} +}; // pie - empty state export const pieEmptyStateData = []; @@ -50,8 +50,8 @@ export const pieErrorOptions = { data: { loading: false, error: { - title: 'No data available', - subtitle: 'Lorem ipsum dolor sit.' + title: "No data available", + subtitle: "Lorem ipsum dolor sit." } } }; diff --git a/packages/core/demo/data/radar.ts b/packages/core/demo/data/radar.ts index 8c49a14c59..c7d2dfdf72 100644 --- a/packages/core/demo/data/radar.ts +++ b/packages/core/demo/data/radar.ts @@ -41,7 +41,7 @@ export const radarCenteredOptions = { legend: { alignment: "center" } -} +}; // radar with missing data export const radarWithMissingDataData = [ diff --git a/packages/core/src/charts/meter.ts b/packages/core/src/charts/meter.ts index a6fe6b903c..351e4339cb 100644 --- a/packages/core/src/charts/meter.ts +++ b/packages/core/src/charts/meter.ts @@ -45,9 +45,7 @@ export class MeterChart extends Chart { // Specify what to render inside the graph only const graph = { id: "meter-graph", - components: [ - new Meter(this.model, this.services) - ], + components: [new Meter(this.model, this.services)], growth: { x: LayoutGrowth.STRETCH, y: LayoutGrowth.FIXED @@ -57,9 +55,7 @@ export class MeterChart extends Chart { // Meter has an unique dataset title within the graph const titleComponent = { id: "title", - components: [ - new MeterTitle(this.model, this.services) - ], + components: [new MeterTitle(this.model, this.services)], growth: { x: LayoutGrowth.PREFERRED, y: LayoutGrowth.FIXED @@ -69,9 +65,7 @@ export class MeterChart extends Chart { // create the title spacer const titleSpacerComponent = { id: "spacer", - components: [ - new Spacer(this.model, this.services, {size: 8}) - ], + components: [new Spacer(this.model, this.services, { size: 8 })], growth: { x: LayoutGrowth.PREFERRED, y: LayoutGrowth.FIXED @@ -79,18 +73,16 @@ export class MeterChart extends Chart { }; // the graph frame for meter includes the custom title (and spacer) - const graphFrame = [new LayoutComponent( - this.model, - this.services, - [ - titleComponent, - titleSpacerComponent, - graph - ], - { - direction: LayoutDirection.COLUMN - } - )]; + const graphFrame = [ + new LayoutComponent( + this.model, + this.services, + [titleComponent, titleSpacerComponent, graph], + { + direction: LayoutDirection.COLUMN + } + ) + ]; // add the meter title as a top level component const components: any[] = this.getChartComponents(graphFrame); diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts index 4feebae037..0c7aaa3b22 100644 --- a/packages/core/src/components/axes/axis.ts +++ b/packages/core/src/components/axes/axis.ts @@ -209,7 +209,7 @@ export class Axis extends Component { "timeScale", "addSpaceOnEdges" ); - + const customDomain = Tools.getProperty( options, "axes", @@ -225,7 +225,11 @@ export class Axis extends Component { // Remove labels on the edges // If there are more than 2 labels to show - if (addSpaceOnEdges && tickValues.length > 2 && !customDomain) { + if ( + addSpaceOnEdges && + tickValues.length > 2 && + !customDomain + ) { tickValues.splice(tickValues.length - 1, 1); tickValues.splice(0, 1); } diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts index 5d74a0f245..efb21fb36b 100644 --- a/packages/core/src/components/essentials/legend.ts +++ b/packages/core/src/components/essentials/legend.ts @@ -115,9 +115,13 @@ export class Legend extends Component { this.addEventListeners(); } - const alignment = Tools.getProperty(legendOptions,"alignment"); + const alignment = Tools.getProperty(legendOptions, "alignment"); - const alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent()); + const alignmentOffset = DOMUtils.getAlignmentOffset( + alignment, + svg, + this.getParent() + ); svg.attr("transform", `translate(${alignmentOffset}, 0)`); } diff --git a/packages/core/src/components/essentials/title-meter.ts b/packages/core/src/components/essentials/title-meter.ts index 6c200790eb..8730367b40 100644 --- a/packages/core/src/components/essentials/title-meter.ts +++ b/packages/core/src/components/essentials/title-meter.ts @@ -14,16 +14,18 @@ export class MeterTitle extends Title { const { groupMapsTo } = options.data; // the title for a meter, is the label for that dataset - const title = svg.selectAll("text.meter-title") + const title = svg + .selectAll("text.meter-title") .data([dataset[groupMapsTo]]); - title.enter() + title + .enter() .append("text") .classed("meter-title", true) .merge(title) .attr("x", 0) .attr("y", "1em") - .text(d => d); + .text((d) => d); title.exit().remove(); @@ -37,7 +39,10 @@ export class MeterTitle extends Title { const maxWidth = this.getMaxTitleWidth(); const titleElement = DOMUtils.appendOrSelect(svg, "text.meter-title"); - if (maxWidth > 0 && titleElement.node().getComputedTextLength() > maxWidth) { + if ( + maxWidth > 0 && + titleElement.node().getComputedTextLength() > maxWidth + ) { this.truncateTitle(titleElement, maxWidth); } } @@ -57,11 +62,14 @@ export class MeterTitle extends Title { // need to check if the width is 0, and try to use the parent attribute // this can happen if the chart is toggled on/off and the height is 0 for the parent, it wont validateDimensions - const containerWidth = containerBounds.width ? containerBounds.width : this.parent.node().getAttribute("width"); + const containerWidth = containerBounds.width + ? containerBounds.width + : this.parent.node().getAttribute("width"); // get the status from the model const status = this.model.getStatus(); - const radius = Tools.getProperty(options, "meter", "status", "indicatorSize") / 2; + const radius = + Tools.getProperty(options, "meter", "status", "indicatorSize") / 2; // create a group for the icon/inner path const statusGroup = DOMUtils.appendOrSelect(svg, `g.status-indicator`) @@ -69,8 +77,7 @@ export class MeterTitle extends Title { .attr("transform", `translate(${containerWidth - radius}, 0)`); const data = status ? [status] : []; - const icon = statusGroup.selectAll("circle.status") - .data(data); + const icon = statusGroup.selectAll("circle.status").data(data); icon.enter() .append("circle") @@ -80,10 +87,10 @@ export class MeterTitle extends Title { .attr("cx", 0) .attr("cy", `calc(1em / 2)`); - const innerIcon = statusGroup.selectAll("path.innerFill") - .data(data); + const innerIcon = statusGroup.selectAll("path.innerFill").data(data); - innerIcon.enter() + innerIcon + .enter() .append("path") .merge(innerIcon) .attr("d", self.getStatusIconPathString(status)) @@ -105,22 +112,38 @@ export class MeterTitle extends Title { const title = DOMUtils.appendOrSelect(svg, "text.meter-title"); // check if it is enabled - const data = Tools.getProperty(this.model.getOptions(), "meter", "statusBar", "percentageIndicator", "enabled") === true ? - [dataValue] : []; + const data = + Tools.getProperty( + this.model.getOptions(), + "meter", + "statusBar", + "percentageIndicator", + "enabled" + ) === true + ? [dataValue] + : []; // append a percentage if it is enabled, update it - const percentage = svg.selectAll("text.percent-value") - .data(data); + const percentage = svg.selectAll("text.percent-value").data(data); // the horizontal offset of the percentage value from the title - const offset = Tools.getProperty(this.model.getOptions(), "meter", "statusBar", "paddingRight"); + const offset = Tools.getProperty( + this.model.getOptions(), + "meter", + "statusBar", + "paddingRight" + ); - percentage.enter() + percentage + .enter() .append("text") .classed("percent-value", true) .merge(percentage) - .text(d => `${d}%`) - .attr("x", +title.attr("x") + title.node().getComputedTextLength() + offset) // set the position to after the title + .text((d) => `${d}%`) + .attr( + "x", + +title.attr("x") + title.node().getComputedTextLength() + offset + ) // set the position to after the title .attr("y", title.attr("y")); percentage.exit().remove(); @@ -137,11 +160,25 @@ export class MeterTitle extends Title { // update the position on the percentage to be inline with the title const tspan = DOMUtils.appendOrSelect(this.parent, "tspan"); - const offset = Tools.getProperty(this.model.getOptions(), "meter", "statusBar", "paddingRight"); + const offset = Tools.getProperty( + this.model.getOptions(), + "meter", + "statusBar", + "paddingRight" + ); const tspanLength = Math.ceil(tspan.node().getComputedTextLength()); - const percentage = DOMUtils.appendOrSelect(this.parent, "text.percent-value"); - percentage.attr("x", +title.attr("x") + title.node().getComputedTextLength() + tspanLength + offset); + const percentage = DOMUtils.appendOrSelect( + this.parent, + "text.percent-value" + ); + percentage.attr( + "x", + +title.attr("x") + + title.node().getComputedTextLength() + + tspanLength + + offset + ); } // computes the maximum space a title can take @@ -153,15 +190,35 @@ export class MeterTitle extends Title { ); // need to check if the width is 0, and try to use the parent attribute - const containerWidth = containerBounds.width ? containerBounds.width : this.parent.node().getAttribute("width"); + const containerWidth = containerBounds.width + ? containerBounds.width + : this.parent.node().getAttribute("width"); - const percentage = DOMUtils.appendOrSelect(this.parent, "text.percent-value"); + const percentage = DOMUtils.appendOrSelect( + this.parent, + "text.percent-value" + ); // the title needs to fit the width of the container without crowding the status, and percentage value - const offset = Tools.getProperty(this.model.getOptions(), "meter", "statusBar", "paddingRight"); + const offset = Tools.getProperty( + this.model.getOptions(), + "meter", + "statusBar", + "paddingRight" + ); const percentageWidth = percentage.node().getComputedTextLength(); - const statusGroup = DOMUtils.appendOrSelect(this.parent, "g.status-indicator").node(); - const statusWidth = DOMUtils.getSVGElementSize(statusGroup, { useBBox: true }).width + Tools.getProperty(this.model.getOptions(), "meter", "status", "paddingLeft"); + const statusGroup = DOMUtils.appendOrSelect( + this.parent, + "g.status-indicator" + ).node(); + const statusWidth = + DOMUtils.getSVGElementSize(statusGroup, { useBBox: true }).width + + Tools.getProperty( + this.model.getOptions(), + "meter", + "status", + "paddingLeft" + ); return containerWidth - percentageWidth - offset - statusWidth; } diff --git a/packages/core/src/components/essentials/title.ts b/packages/core/src/components/essentials/title.ts index c841a4f3f9..c10255aaa8 100644 --- a/packages/core/src/components/essentials/title.ts +++ b/packages/core/src/components/essentials/title.ts @@ -9,7 +9,8 @@ export class Title extends Component { render() { const svg = this.getContainerSVG(); - const text = svg.selectAll("text.title") + const text = svg + .selectAll("text.title") .data([this.model.getOptions().title]); text.enter() @@ -18,14 +19,14 @@ export class Title extends Component { .merge(text) .attr("x", 0) .attr("y", "1em") - .html(d => d); + .html((d) => d); // check the max space the title has to render const maxWidth = this.getMaxTitleWidth(); const title = DOMUtils.appendOrSelect(svg, "text.title"); // check if title needs truncation (and tooltip support) - if (title.node().getComputedTextLength() > maxWidth && maxWidth > 0) { + if (title.node().getComputedTextLength() > maxWidth && maxWidth > 0) { this.truncateTitle(title, maxWidth); } text.exit().remove(); @@ -65,9 +66,9 @@ export class Title extends Component { // use the substring as the title title - .html(titleString.substring(0, substringIndex - 1)) - .append("tspan") - .text("..."); + .html(titleString.substring(0, substringIndex - 1)) + .append("tspan") + .text("..."); // add events for displaying the tooltip with the title const self = this; @@ -84,7 +85,7 @@ export class Title extends Component { .on("mouseout", function () { self.services.events.dispatchEvent(Events.Tooltip.HIDE); }); - } + } } // computes the maximum space a title can take diff --git a/packages/core/src/components/graphs/meter.ts b/packages/core/src/components/graphs/meter.ts index b71f2a81ca..1d81bdb51d 100644 --- a/packages/core/src/components/graphs/meter.ts +++ b/packages/core/src/components/graphs/meter.ts @@ -17,59 +17,66 @@ export class Meter extends Component { const data = this.model.getDisplayData(); const status = this.model.getStatus(); - const { width } = DOMUtils.getSVGElementSize(this.parent, { useAttrs: true }); + const { width } = DOMUtils.getSVGElementSize(this.parent, { + useAttrs: true + }); const { groupMapsTo } = options.data; // each meter has a scale for the value but no visual axis - const xScale = scaleLinear() - .domain([0, 100]) - .range([0, width]); + const xScale = scaleLinear().domain([0, 100]).range([0, width]); // draw the container to hold the value DOMUtils.appendOrSelect(svg, "rect.container") - .attr("x", 0 ) - .attr("y", 0 ) + .attr("x", 0) + .attr("y", 0) .attr("width", width) .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 dataset = data.value <= 100 ? data : (data["value"] = 100); // rect with the value binded - const value = svg.selectAll("rect.value") - .data([dataset]); + const value = svg.selectAll("rect.value").data([dataset]); // if user provided a color for the bar, we dont want to attach a status class const userProvidedScale = Tools.getProperty(options, "color", "scale"); // draw the value bar - value.enter() + value + .enter() .append("rect") .classed("value", true) .merge(value) - .attr("x", 0 ) - .attr("y", 0 ) + .attr("x", 0) + .attr("y", 0) .attr("height", Tools.getProperty(options, "meter", "height")) .classed(`status--${status}`, status != null && !userProvidedScale) - .transition(this.services.transitions.getTransition("meter-bar-update", animate)) - .attr("width", d => xScale(d.value)) - .attr("fill", d => self.model.getFillColor(d[groupMapsTo])) + .transition( + this.services.transitions.getTransition( + "meter-bar-update", + animate + ) + ) + .attr("width", (d) => xScale(d.value)) + .attr("fill", (d) => self.model.getFillColor(d[groupMapsTo])) // a11y .attr("role", Roles.GRAPHICS_SYMBOL) .attr("aria-roledescription", "value") - .attr("aria-label", d => d.value); + .attr("aria-label", (d) => d.value); // draw the peak const peakValue = Tools.getProperty(options, "meter", "peak"); // 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; + const updatedPeak = + peakValue !== null && peakValue < dataset.value + ? dataset.value + : peakValue; // dont display peak if there isnt one - const peakData = (updatedPeak === null) ? [] : [updatedPeak]; + const peakData = updatedPeak === null ? [] : [updatedPeak]; // if a peak is supplied within the domain, we want to render it - const peak = svg.selectAll("line.peak") - .data(peakData); + const peak = svg.selectAll("line.peak").data(peakData); peak.enter() .append("line") @@ -77,13 +84,18 @@ export class Meter extends Component { .merge(peak) .attr("y1", 0) .attr("y2", Tools.getProperty(options, "meter", "height")) - .transition(this.services.transitions.getTransition("peak-line-update", animate)) - .attr("x1", d => xScale(d)) - .attr("x2", d => xScale(d)) + .transition( + this.services.transitions.getTransition( + "peak-line-update", + animate + ) + ) + .attr("x1", (d) => xScale(d)) + .attr("x2", (d) => xScale(d)) // a11y .attr("role", Roles.GRAPHICS_SYMBOL) .attr("aria-roledescription", "peak") - .attr("aria-label", d => d); + .attr("aria-label", (d) => d); peak.exit().remove(); diff --git a/packages/core/src/components/graphs/pie.ts b/packages/core/src/components/graphs/pie.ts index 28b9390437..a49fed3875 100644 --- a/packages/core/src/components/graphs/pie.ts +++ b/packages/core/src/components/graphs/pie.ts @@ -224,17 +224,14 @@ export class Pie extends Component { // Render pie label callouts this.renderCallouts(calloutData); - const optionName = Tools.getProperty(options, "donut") ? "donut" : "pie"; - const alignment = Tools.getProperty( - options, - optionName, - "alignment" - ); + const optionName = Tools.getProperty(options, "donut") + ? "donut" + : "pie"; + const alignment = Tools.getProperty(options, optionName, "alignment"); - const { width } = DOMUtils.getSVGElementSize( - this.getParent(), - { useAttr: true } - ); + const { width } = DOMUtils.getSVGElementSize(this.getParent(), { + useAttr: true + }); // Position Pie let pieTranslateX = radius + options.pie.xOffset; diff --git a/packages/core/src/components/graphs/radar.ts b/packages/core/src/components/graphs/radar.ts index 73667cdb75..8ba914d872 100644 --- a/packages/core/src/components/graphs/radar.ts +++ b/packages/core/src/components/graphs/radar.ts @@ -624,10 +624,10 @@ export class Radar extends Component { .attr("fill", (d) => colorScale(d[groupMapsTo])); // rectangles - const xAxesRect = DOMUtils.appendOrSelect( - svg, - "g.x-axes-rect" - ).attr("role", Roles.GROUP); + const xAxesRect = DOMUtils.appendOrSelect(svg, "g.x-axes-rect").attr( + "role", + Roles.GROUP + ); const xAxisRectUpdate = xAxesRect .selectAll("rect") .data(this.uniqueKeys); @@ -649,15 +649,15 @@ export class Radar extends Component { (key) => `rotate(${radToDeg(xScale(key))}, ${c.x}, ${c.y})` ); - const alignment = Tools.getProperty( - options, - "radar", - "alignment" - ); + const alignment = Tools.getProperty(options, "radar", "alignment"); - const alignmentOffset = DOMUtils.getAlignmentOffset(alignment, svg, this.getParent()); + const alignmentOffset = DOMUtils.getAlignmentOffset( + alignment, + svg, + this.getParent() + ); svg.attr("transform", `translate(${alignmentOffset}, 0)`); - + // Add event listeners this.addEventListeners(); @@ -666,7 +666,10 @@ export class Radar extends Component { // append temporarily the label to get the exact space that it occupies getLabelDimensions = (label: string) => { - const tmpTick = DOMUtils.appendOrSelect(this.getContainerSVG(), `g.tmp-tick`); + const tmpTick = DOMUtils.appendOrSelect( + this.getContainerSVG(), + `g.tmp-tick` + ); const tmpTickText = DOMUtils.appendOrSelect(tmpTick, `text`).text( label ); diff --git a/packages/core/src/components/graphs/skeleton.ts b/packages/core/src/components/graphs/skeleton.ts index f97a78ef07..60a6719940 100644 --- a/packages/core/src/components/graphs/skeleton.ts +++ b/packages/core/src/components/graphs/skeleton.ts @@ -28,7 +28,11 @@ export class Skeleton extends Component { "data", "loading" ); - const error = Tools.getProperty(this.model.getOptions(), 'data', 'error'); + const error = Tools.getProperty( + this.model.getOptions(), + "data", + "error" + ); // display a skeleton if there is no chart data or the loading flag is set to true if (isDataLoading) { @@ -314,82 +318,109 @@ export class Skeleton extends Component { } renderErrorMesssage(error) { - const skeleton = this.parent.select('.chart-skeleton') + const skeleton = this.parent.select(".chart-skeleton"); const height = skeleton.attr("height"); const width = skeleton.attr("width"); - const errorContainer = DOMUtils.appendOrSelect(skeleton, "svg.bx--cc--error-message") - .attr('width', width) - .attr('height', height) + const errorContainer = DOMUtils.appendOrSelect( + skeleton, + "svg.bx--cc--error-message" + ) + .attr("width", width) + .attr("height", height); // Error icon - const errorIcon = errorContainer.selectAll("circle.bx--cc--error-message__icon") - .data([{ - cx: '1em', - cy: (height / 2) - 5, - r: '.625em' - }]); - - errorIcon.enter() - .append('circle') - .classed('bx--cc--error-message__icon', true) + const errorIcon = errorContainer + .selectAll("circle.bx--cc--error-message__icon") + .data([ + { + cx: "1em", + cy: height / 2 - 5, + r: ".625em" + } + ]); + + errorIcon + .enter() + .append("circle") + .classed("bx--cc--error-message__icon", true) .merge(errorIcon) - .attr('cx', d => d.cx) - .attr('cy', d => d.cy) - .attr('r', d => d.r) + .attr("cx", (d) => d.cx) + .attr("cy", (d) => d.cy) + .attr("r", (d) => d.r); - DOMUtils.appendOrSelect(errorContainer, 'circle.bx--cc--error-message__icon') + DOMUtils.appendOrSelect( + errorContainer, + "circle.bx--cc--error-message__icon" + ); errorIcon.exit().remove(); // Exclamation point - const exclamationPoint = errorContainer.selectAll('text.bx--cc--error-message__exclamation-point').data(['!']) + const exclamationPoint = errorContainer + .selectAll("text.bx--cc--error-message__exclamation-point") + .data(["!"]); - exclamationPoint.enter() - .append('text') - .classed('bx--cc--error-message__exclamation-point', true) + exclamationPoint + .enter() + .append("text") + .classed("bx--cc--error-message__exclamation-point", true) .merge(exclamationPoint) - .attr("x", '.75em') - .attr('y', (height / 2) + 1) - .html(d => d) + .attr("x", ".75em") + .attr("y", height / 2 + 1) + .html((d) => d); - DOMUtils.appendOrSelect(errorContainer, 'text.bx--cc--error-message__exclamation-point') + DOMUtils.appendOrSelect( + errorContainer, + "text.bx--cc--error-message__exclamation-point" + ); exclamationPoint.exit().remove(); // Title - const errorTitle = errorContainer.selectAll("text.bx--cc--error-message__title").data([error.title]); + const errorTitle = errorContainer + .selectAll("text.bx--cc--error-message__title") + .data([error.title]); - errorTitle.enter() + errorTitle + .enter() .append("text") .classed("bx--cc--error-message__title", true) .merge(errorTitle) .attr("x", "2.25em") .attr("y", height / 2) - .html(d => d); + .html((d) => d); - DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__title"); + DOMUtils.appendOrSelect( + errorContainer, + "text.bx--cc--error-message__title" + ); errorTitle.exit().remove(); // Subtitle - const errorSubtitle = errorContainer.selectAll("text.bx--cc--error-message__subtitle").data([error.subtitle]); + const errorSubtitle = errorContainer + .selectAll("text.bx--cc--error-message__subtitle") + .data([error.subtitle]); - errorSubtitle.enter() + errorSubtitle + .enter() .append("text") .classed("bx--cc--error-message__subtitle", true) .merge(errorSubtitle) .attr("x", "2.65em") - .attr("y", (height / 2) + 18) - .html(d => d); + .attr("y", height / 2 + 18) + .html((d) => d); - DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__subtitle"); + DOMUtils.appendOrSelect( + errorContainer, + "text.bx--cc--error-message__subtitle" + ); errorSubtitle.exit().remove(); } - removeErrorMessage() { const container = this.parent.select(".bx--cc--error-message"); container.remove(); diff --git a/packages/core/src/interfaces/axis-scales.ts b/packages/core/src/interfaces/axis-scales.ts index 8a0c1e6d83..63e05e2f3d 100644 --- a/packages/core/src/interfaces/axis-scales.ts +++ b/packages/core/src/interfaces/axis-scales.ts @@ -81,7 +81,7 @@ export interface AxisOptions { /** * optional custom array of tick values that is within the domain of data */ - values?: any[] + values?: any[]; }; truncation?: TruncationOptions; } diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts index 273448732f..2b226c24d5 100644 --- a/packages/core/src/interfaces/charts.ts +++ b/packages/core/src/interfaces/charts.ts @@ -1,9 +1,4 @@ -import { - GaugeTypes, - Statuses, - ArrowDirections, - Alignments -} from "./enums"; +import { GaugeTypes, Statuses, ArrowDirections, Alignments } from "./enums"; import { LegendOptions, TooltipOptions, @@ -289,7 +284,7 @@ export interface DonutChartOptions extends PieChartOptions { export interface MeterChartOptions extends BaseChartOptions { meter?: { - height?: number, + height?: number; title?: { /** * offsets the percentage value from the title @@ -299,13 +294,13 @@ export interface MeterChartOptions extends BaseChartOptions { /** * rendering of the percentage value relative to the dataset within title */ - enabled?: boolean - } - }, + enabled?: boolean; + }; + }; status?: { indicatorSize?: number; paddingLeft?: number; - } + }; }; } diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index 4b56616f59..645a232b37 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -1,8 +1,4 @@ -import { - LayoutGrowth, - LegendPositions, - Alignments -} from "./enums"; +import { LayoutGrowth, LegendPositions, Alignments } from "./enums"; import { Component } from "../components/component"; import { TruncationOptions } from "./truncation"; diff --git a/packages/core/src/model-meter.ts b/packages/core/src/model-meter.ts index 2dc8362ff0..478d2e214a 100644 --- a/packages/core/src/model-meter.ts +++ b/packages/core/src/model-meter.ts @@ -13,7 +13,6 @@ export class MeterChartModel extends ChartModel { super(services); } - generateDataLabels(newData) { const dataLabels = {}; dataLabels[newData.label] = Configuration.legend.items.status.ACTIVE; @@ -21,7 +20,6 @@ export class MeterChartModel extends ChartModel { return dataLabels; } - getDisplayData() { if (!this.get("data")) { return null; @@ -55,9 +53,17 @@ export class MeterChartModel extends ChartModel { const dataValue = this.getDisplayData().value; // user needs to supply ranges - const allRanges = Tools.getProperty(options, "meter", "status", "ranges"); + const allRanges = Tools.getProperty( + options, + "meter", + "status", + "ranges" + ); if (allRanges) { - const result = allRanges.filter(step => (step.range[0] <= dataValue && dataValue <= step.range[1])); + const result = allRanges.filter( + (step) => + step.range[0] <= dataValue && dataValue <= step.range[1] + ); if (result.length > 0) { return result[0].status; } @@ -66,5 +72,3 @@ export class MeterChartModel extends ChartModel { return null; } } - - diff --git a/packages/core/src/services/essentials/dom-utils.ts b/packages/core/src/services/essentials/dom-utils.ts index 0880811db8..8b77d1877f 100644 --- a/packages/core/src/services/essentials/dom-utils.ts +++ b/packages/core/src/services/essentials/dom-utils.ts @@ -150,14 +150,10 @@ export class DOMUtils extends Service { } static getAlignmentOffset(alignment, svg, parent) { - const svgDimensions = DOMUtils.getSVGElementSize( - svg, - { useBBox: true } - ); - const { width } = DOMUtils.getSVGElementSize( - parent, - { useAttr: true } - ); + const svgDimensions = DOMUtils.getSVGElementSize(svg, { + useBBox: true + }); + const { width } = DOMUtils.getSVGElementSize(parent, { useAttr: true }); let alignmentOffset = 0; if (alignment === Alignments.CENTER) { @@ -243,19 +239,30 @@ export class DOMUtils extends Service { setSVGMaxHeight() { // if there is a set height on the holder, leave the chart svg height at 100% if (!this.model.getOptions().height) { - const { height: chartHeight } = DOMUtils.getSVGElementSize(select(this.svg), {useBBox : true}); + const { height: chartHeight } = DOMUtils.getSVGElementSize( + select(this.svg), + { useBBox: true } + ); const chartSVGSelector = select(this.svg).attr("class"); - const children = select(this.svg).selectAll(`.${chartSVGSelector} > svg`); + const children = select(this.svg).selectAll( + `.${chartSVGSelector} > svg` + ); // get the height of the children SVGs (spacers, titles, etc) let childrenHeight = 0; children.nodes().forEach(function (childSVG) { - childrenHeight += Number(DOMUtils.getSVGElementSize(select(childSVG), {useBBox : true}).height); + childrenHeight += Number( + DOMUtils.getSVGElementSize(select(childSVG), { + useBBox: true + }).height + ); }); // set the chart svg height to the children height // forcing the chart not to take up any more space than it requires - childrenHeight <= chartHeight ? select(this.svg).attr("height", childrenHeight) : select(this.svg).attr("height", "100%") ; + childrenHeight <= chartHeight + ? select(this.svg).attr("height", childrenHeight) + : select(this.svg).attr("height", "100%"); } } diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss index c1ad3d6e85..f8c1c68405 100644 --- a/packages/core/src/styles/components/_error-message.scss +++ b/packages/core/src/styles/components/_error-message.scss @@ -9,10 +9,10 @@ svg.#{$prefix}--#{$charts-prefix}--error-message { } text.#{$prefix}--#{$charts-prefix}--error-message__title { - @include carbon--type-style('productive-heading-01'); + @include carbon--type-style("productive-heading-01"); } text.#{$prefix}--#{$charts-prefix}--error-message__subtitle { - @include carbon--type-style('helper-text-01'); + @include carbon--type-style("helper-text-01"); } } diff --git a/packages/core/src/styles/components/_meter-title.scss b/packages/core/src/styles/components/_meter-title.scss index bfb89a3cc1..173d710c77 100644 --- a/packages/core/src/styles/components/_meter-title.scss +++ b/packages/core/src/styles/components/_meter-title.scss @@ -24,7 +24,11 @@ } path.innerFill { - @if $carbon--theme == $carbon--theme--g90 or $carbon--theme == $carbon--theme--g100 { + @if $carbon--theme == + $carbon--theme--g90 or + $carbon--theme == + $carbon--theme--g100 + { fill: $carbon--black-100; } @else { fill: $carbon--white-0; diff --git a/packages/core/src/styles/graphs/_meter.scss b/packages/core/src/styles/graphs/_meter.scss index f923640225..2115f4321c 100644 --- a/packages/core/src/styles/graphs/_meter.scss +++ b/packages/core/src/styles/graphs/_meter.scss @@ -12,7 +12,11 @@ fill: $support-03; stroke-width: 1px; stroke: $carbon-dataviz-alert; - @if $carbon--theme == $carbon--theme--g90 or $carbon--theme == $carbon--theme--g100 { + @if $carbon--theme == + $carbon--theme--g90 or + $carbon--theme == + $carbon--theme--g100 + { stroke: none; } } diff --git a/packages/core/src/styles/styles.scss b/packages/core/src/styles/styles.scss index 6bd3076aa4..7da370e033 100644 --- a/packages/core/src/styles/styles.scss +++ b/packages/core/src/styles/styles.scss @@ -1,7 +1,7 @@ $charts-prefix: "cc"; // Custom dataviz palette colors -$carbon-dataviz-alert: #B28600; +$carbon-dataviz-alert: #b28600; $carbon-dataviz-yellow-10: #fcf4d6; // Carbon imports diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index 78cfd26723..b8c3fff50f 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -7,26 +7,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline **Note:** Version bump only for package @carbon/charts-vue - - - - ## [0.34.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.3...v0.34.4) (2020-07-21) **Note:** Version bump only for package @carbon/charts-vue - - - - ## [0.34.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.2...v0.34.3) (2020-07-20) **Note:** Version bump only for package @carbon/charts-vue - - - - ## [0.34.2](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.1...v0.34.2) (2020-07-15) **Note:** Version bump only for package @carbon/charts-vue diff --git a/packages/vue/src/ccv-meter-chart.vue b/packages/vue/src/ccv-meter-chart.vue index 016e3a7c51..65e912d149 100644 --- a/packages/vue/src/ccv-meter-chart.vue +++ b/packages/vue/src/ccv-meter-chart.vue @@ -12,8 +12,8 @@ export default { mounted() { this.coreChart = new MeterChart(this.$el, { data: this.data, - options: this.options + options: this.options, }); - } + }, }; diff --git a/packages/vue/src/index.js b/packages/vue/src/index.js index eb9d651009..775bb0ff9d 100644 --- a/packages/vue/src/index.js +++ b/packages/vue/src/index.js @@ -25,7 +25,7 @@ const components = [ CcvPieChart, CcvScatterChart, CcvMeterChart, - CcvRadarChart + CcvRadarChart, ]; /* @@ -73,5 +73,5 @@ export { CcvPieChart, CcvScatterChart, CcvMeterChart, - CcvRadarChart + CcvRadarChart, };