diff --git a/CHANGELOG.md b/CHANGELOG.md index 9879d49b24..cd981a6be3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,55 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.24.0](https://github.com/IBM/carbon-charts/compare/v0.23.0...v0.24.0) (2019-12-17) + + +### Features + +* **core, react, angular, vue:** add WAI-ARIA tags to elements ([1216ed6](https://github.com/IBM/carbon-charts/commit/1216ed6)) + + + + + +# [0.23.0](https://github.com/IBM/carbon-charts/compare/v0.22.4...v0.23.0) (2019-12-17) + + +### Features + +* **core:** add spacer components ([4e5ab5c](https://github.com/IBM/carbon-charts/commit/4e5ab5c)) + + + + + +## [0.22.4](https://github.com/IBM/carbon-charts/compare/v0.22.3...v0.22.4) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-monorepo + + + + + +## [0.22.3](https://github.com/IBM/carbon-charts/compare/v0.22.2...v0.22.3) (2019-12-16) + + +### Bug Fixes + +* **core:** update tooltip value formatter ([2a978d8](https://github.com/IBM/carbon-charts/commit/2a978d8)) + + + + + +## [0.22.2](https://github.com/IBM/carbon-charts/compare/v0.22.1...v0.22.2) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-monorepo + + + + + ## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12) diff --git a/CODEOWNERS b/CODEOWNERS index 6264da7db0..a291506964 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1 @@ -* @theiliad @natashadecoste +* @theiliad @natashadecoste @carbon-design-system/carbon-charts diff --git a/README.md b/README.md index 247968ad31..63eb0eeaa3 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,9 @@ - [React](./packages/react) - [Vue](./packages/vue) +## CHANGELOG +Read the release change logs [here](./CHANGELOG.md) + ## Component status :white_check_mark: Stable :hourglass_flowing_sand: In progress @@ -55,7 +58,7 @@ Get updates on Charts' development and chat with the core team and community. -- We use the **semantic-release** library to automatically version our releases within the guidelines of Semantic Versioning [Semantic Versioning guidelines](http://semver.org/). -See our [releases notes](https://github.com/carbon-design-system/carbon-charts/releases) for the changelog of each version of Charts. +See our [release change logs](https://github.com/carbon-design-system/carbon-charts/blob/master/CHANGELOG.md) for the changelog of each version of Charts. ## Core Team diff --git a/lerna.json b/lerna.json index 0b6aac94d7..d51f05afe5 100644 --- a/lerna.json +++ b/lerna.json @@ -12,5 +12,5 @@ ] } }, - "version": "0.22.1" + "version": "0.24.0" } diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md index 8393010e05..861b54d176 100644 --- a/packages/angular/CHANGELOG.md +++ b/packages/angular/CHANGELOG.md @@ -3,6 +3,46 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.24.0](https://github.com/IBM/carbon-charts/compare/v0.23.0...v0.24.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + +# [0.23.0](https://github.com/IBM/carbon-charts/compare/v0.22.4...v0.23.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + +## [0.22.4](https://github.com/IBM/carbon-charts/compare/v0.22.3...v0.22.4) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + +## [0.22.3](https://github.com/IBM/carbon-charts/compare/v0.22.2...v0.22.3) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + +## [0.22.2](https://github.com/IBM/carbon-charts/compare/v0.22.1...v0.22.2) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-angular + + + + + ## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12) diff --git a/packages/angular/package.json b/packages/angular/package.json index efb17e51c6..ae1dcdb374 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-angular", - "version": "0.22.1", + "version": "0.24.0", "description": "Carbon charting components for Angular", "main": "index.js", "scripts": { @@ -39,7 +39,7 @@ "scss" ], "dependencies": { - "@carbon/charts": "^0.22.1" + "@carbon/charts": "^0.24.0" }, "peerDependencies": { "@angular/common": "^6.0.0 || ^7.0.0", diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 19e765ba61..6eeafc5885 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,55 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.24.0](https://github.com/IBM/carbon-charts/compare/v0.23.0...v0.24.0) (2019-12-17) + + +### Features + +* **core, react, angular, vue:** add WAI-ARIA tags to elements ([1216ed6](https://github.com/IBM/carbon-charts/commit/1216ed6)) + + + + + +# [0.23.0](https://github.com/IBM/carbon-charts/compare/v0.22.4...v0.23.0) (2019-12-17) + + +### Features + +* **core:** add spacer components ([4e5ab5c](https://github.com/IBM/carbon-charts/commit/4e5ab5c)) + + + + + +## [0.22.4](https://github.com/IBM/carbon-charts/compare/v0.22.3...v0.22.4) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts + + + + + +## [0.22.3](https://github.com/IBM/carbon-charts/compare/v0.22.2...v0.22.3) (2019-12-16) + + +### Bug Fixes + +* **core:** update tooltip value formatter ([2a978d8](https://github.com/IBM/carbon-charts/commit/2a978d8)) + + + + + +## [0.22.2](https://github.com/IBM/carbon-charts/compare/v0.22.1...v0.22.2) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts + + + + + ## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12) **Note:** Version bump only for package @carbon/charts diff --git a/packages/core/package.json b/packages/core/package.json index d399b59181..1a5a3029f7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts", - "version": "0.22.1", + "version": "0.24.0", "description": "Carbon charting components", "main": "./bundle.js", "module": "./index.js", diff --git a/packages/core/src/axis-chart.ts b/packages/core/src/axis-chart.ts index adc296c7b0..30ba6d9808 100644 --- a/packages/core/src/axis-chart.ts +++ b/packages/core/src/axis-chart.ts @@ -12,7 +12,8 @@ import { Legend, Title, Tooltip, - TooltipBar + TooltipBar, + Spacer } from "./components/index"; import { Tools } from "./tools"; @@ -83,6 +84,17 @@ export class AxisChart extends Chart { } } + const legendSpacerComponent = { + id: "spacer", + components: [ + new Spacer(this.model, this.services) + ], + growth: { + x: LayoutGrowth.PREFERRED, + y: LayoutGrowth.FIXED + } + }; + const fullFrameComponent = { id: "full-frame", components: [ @@ -91,6 +103,7 @@ export class AxisChart extends Chart { this.services, [ ...(isEnabled ? [ legendComponent ] : [ ]), + legendSpacerComponent, graphFrameComponent ], { @@ -108,6 +121,19 @@ export class AxisChart extends Chart { const topLevelLayoutComponents = []; if (this.model.getOptions().title) { topLevelLayoutComponents.push(titleComponent); + + const titleSpacerComponent = { + id: "spacer", + components: [ + new Spacer(this.model, this.services) + ], + growth: { + x: LayoutGrowth.PREFERRED, + y: LayoutGrowth.FIXED + } + }; + + topLevelLayoutComponents.push(titleSpacerComponent); } topLevelLayoutComponents.push(fullFrameComponent); diff --git a/packages/core/src/chart.ts b/packages/core/src/chart.ts index 4604a6032e..74f0629134 100644 --- a/packages/core/src/chart.ts +++ b/packages/core/src/chart.ts @@ -14,7 +14,8 @@ import { Component, Title, Legend, LayoutComponent, - Tooltip + Tooltip, + Spacer } from "./components"; import { Tools } from "./tools"; @@ -171,6 +172,17 @@ export class Chart { } } + const legendSpacerComponent = { + id: "spacer", + components: [ + new Spacer(this.model, this.services) + ], + growth: { + x: LayoutGrowth.PREFERRED, + y: LayoutGrowth.FIXED + } + }; + const fullFrameComponent = { id: "full-frame", components: [ @@ -179,6 +191,7 @@ export class Chart { this.services, [ ...(isEnabled ? [ legendComponent ] : [ ]), + legendSpacerComponent, graphFrameComponent ], { @@ -196,6 +209,19 @@ export class Chart { const topLevelLayoutComponents = []; if (this.model.getOptions().title) { topLevelLayoutComponents.push(titleComponent); + + const titleSpacerComponent = { + id: "spacer", + components: [ + new Spacer(this.model, this.services) + ], + growth: { + x: LayoutGrowth.PREFERRED, + y: LayoutGrowth.FIXED + } + }; + + topLevelLayoutComponents.push(titleSpacerComponent); } topLevelLayoutComponents.push(fullFrameComponent); diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts index 23996238e8..cbd7f257e9 100644 --- a/packages/core/src/components/axes/axis.ts +++ b/packages/core/src/components/axes/axis.ts @@ -1,6 +1,6 @@ // Internal Imports import { Component } from "../component"; -import { AxisPositions, ScaleTypes, AxisTypes } from "../../interfaces"; +import { AxisPositions, ScaleTypes, AxisTypes, Roles } from "../../interfaces"; import { Tools } from "../../tools"; import { ChartModel } from "../../model"; import { DOMUtils } from "../../services"; @@ -228,12 +228,16 @@ export class Axis extends Component { const container = DOMUtils.appendOrSelect(svg, `g.axis.${axisPosition}`); const axisRefExists = !container.select(`g.ticks`).empty(); let axisRef = DOMUtils.appendOrSelect(container, `g.ticks`); + if (!axisRefExists) { + axisRef.attr("role", `${Roles.GRAPHICS_OBJECT} ${Roles.GROUP}`); + } // We draw the invisible axis because of the async nature of d3 transitions // To be able to tell the final width & height of the axis when initiaing the transition // The invisible axis is updated instantly and without a transition const invisibleAxisRef = DOMUtils.appendOrSelect(container, `g.ticks.invisible`) - .style("opacity", "0"); + .style("opacity", "0") + .attr("aria-hidden", true); // Position and transition the axis switch (axisPosition) { diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts index ba2e30b362..a9729a8e33 100644 --- a/packages/core/src/components/essentials/legend.ts +++ b/packages/core/src/components/essentials/legend.ts @@ -2,7 +2,7 @@ import * as Configuration from "../../configuration"; import { Component } from "../component"; import { Tools } from "../../tools"; -import { LegendOrientations, LegendPositions } from "../../interfaces"; +import { LegendOrientations, Roles } from "../../interfaces"; import { DOMUtils } from "../../services"; // D3 Imports @@ -12,7 +12,7 @@ export class Legend extends Component { type = "legend"; render() { - const svg = this.getContainerSVG(); + const svg = this.getContainerSVG().attr("role", Roles.GRAPHICS_DOCUMENT); const options = this.model.getOptions(); const legendItems = svg.selectAll("g.legend-item") @@ -58,17 +58,6 @@ export class Legend extends Component { if (legendClickable && addedLegendItems.size() > 0) { this.addEventListeners(); } - - const legendPosition = Tools.getProperty(options, "legend", "position"); - if (legendPosition === LegendPositions.BOTTOM || legendPosition === LegendPositions.TOP) { - // TODO - Replace with layout component margins - DOMUtils.appendOrSelect(svg, "rect.spacer") - .attr("x", 0) - .attr("y", 10) - .attr("width", 20) - .attr("height", 20) - .attr("fill", "none"); - } } breakItemsIntoLines(addedLegendItems) { @@ -101,7 +90,7 @@ export class Legend extends Component { const previousLegendItem = select(svg.selectAll("g.legend-item").nodes()[i - 1]); if (itemIndexInLine === 0 || previousLegendItem.empty() || legendOrientation === LegendOrientations.VERTICAL) { - if (legendOrientation === LegendOrientations.VERTICAL) { + if (legendOrientation === LegendOrientations.VERTICAL && i !== 0) { lineNumber++; } } else { @@ -117,11 +106,7 @@ export class Legend extends Component { } } - const legendPosition = Tools.getProperty(options, "legend", "position"); - let yOffset = 0; - if (legendPosition === LegendPositions.BOTTOM) { - yOffset = 20; - } + const yOffset = 0; // Position checkbox // TODO - Replace with layout component margins diff --git a/packages/core/src/components/essentials/title.ts b/packages/core/src/components/essentials/title.ts index 34e1120db1..8674abcde2 100644 --- a/packages/core/src/components/essentials/title.ts +++ b/packages/core/src/components/essentials/title.ts @@ -57,14 +57,6 @@ export class Title extends Component { .attr("y", 20) .text(this.model.getOptions().title); - // TODO - Replace with layout component margins - DOMUtils.appendOrSelect(svg, "rect.spacer") - .attr("x", 0) - .attr("y", 20) - .attr("width", 20) - .attr("height", 20) - .attr("fill", "none"); - // title needs to first render so that we can check for overflow this.truncateTitle(); } diff --git a/packages/core/src/components/graphs/bar-grouped.ts b/packages/core/src/components/graphs/bar-grouped.ts index 68e49f88e2..a149350646 100644 --- a/packages/core/src/components/graphs/bar-grouped.ts +++ b/packages/core/src/components/graphs/bar-grouped.ts @@ -1,11 +1,11 @@ // Internal Imports import { Bar } from "./bar"; +import { TooltipTypes, Roles } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; import { color } from "d3-color"; import { ScaleBand, scaleBand } from "d3-scale"; -import { TooltipTypes } from "../../interfaces"; export class GroupedBar extends Bar { type = "grouped-bar"; @@ -67,7 +67,9 @@ export class GroupedBar extends Bar { // Add the bar groups that need to be introduced const barGroupsEnter = barGroups.enter() .append("g") - .classed("bars", true); + .classed("bars", true) + .attr("role", Roles.GROUP) + .attr("aria-labelledby", d => d); // Update data on all bars const bars = barGroupsEnter.merge(barGroups) @@ -98,7 +100,11 @@ export class GroupedBar extends Bar { return Math.abs(this.services.axes.getYValue(d, i) - this.services.axes.getYValue(0)); }) .attr("fill", d => this.model.getFillScale()[d.datasetLabel](d.label)) - .attr("opacity", 1); + .attr("opacity", 1) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "bar") + .attr("aria-label", d => d.value); // Add event listeners to elements drawn this.addEventListeners(); diff --git a/packages/core/src/components/graphs/bar-simple.ts b/packages/core/src/components/graphs/bar-simple.ts index 4bc7bcd04f..64f76f36c9 100644 --- a/packages/core/src/components/graphs/bar-simple.ts +++ b/packages/core/src/components/graphs/bar-simple.ts @@ -1,10 +1,10 @@ // Internal Imports import { Bar } from "./bar"; +import { TooltipTypes, Roles } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; import { color } from "d3-color"; -import { TooltipTypes } from "../../interfaces"; export class SimpleBar extends Bar { type = "simple-bar"; @@ -35,7 +35,8 @@ export class SimpleBar extends Bar { // Add the bar groups that need to be introduced const barGroupsEnter = barGroups.enter() .append("g") - .classed("bars", true); + .classed("bars", true) + .attr("role", Roles.GROUP); // Update data on all bars const bars = barGroupsEnter.merge(barGroups) @@ -66,7 +67,11 @@ export class SimpleBar extends Bar { .attr("height", (d, i) => { return Math.abs(this.services.axes.getYValue(d, i) - this.services.axes.getYValue(0)); }) - .attr("opacity", 1); + .attr("opacity", 1) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "bar") + .attr("aria-label", d => d.value); // Add event listeners to elements drawn this.addEventListeners(); diff --git a/packages/core/src/components/graphs/bar-stacked.ts b/packages/core/src/components/graphs/bar-stacked.ts index a192893dc2..feab2c2094 100644 --- a/packages/core/src/components/graphs/bar-stacked.ts +++ b/packages/core/src/components/graphs/bar-stacked.ts @@ -1,7 +1,7 @@ // Internal Imports -import { ScaleTypes, TooltipTypes } from "../../interfaces/enums"; import { Tools } from "../../tools"; import { Bar } from "./bar"; +import { Roles, ScaleTypes, TooltipTypes } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; @@ -111,7 +111,8 @@ export class StackedBar extends Bar { // Add bar groups that need to be introduced barGroups.enter() .append("g") - .classed("bars", true); + .classed("bars", true) + .attr("role", Roles.GROUP); // Update data on all bars const bars = svg.selectAll("g.bars").selectAll("rect.bar") @@ -146,7 +147,11 @@ export class StackedBar extends Bar { return height; }) - .attr("opacity", 1); + .attr("opacity", 1) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "bar") + .attr("aria-label", d => d.value); // Add event listeners for the above elements this.addEventListeners(); diff --git a/packages/core/src/components/graphs/line.ts b/packages/core/src/components/graphs/line.ts index ba85eaa44c..b5d315679b 100644 --- a/packages/core/src/components/graphs/line.ts +++ b/packages/core/src/components/graphs/line.ts @@ -1,6 +1,7 @@ // Internal Imports import { Component } from "../component"; import * as Configuration from "../../configuration"; +import { Roles } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; @@ -81,6 +82,11 @@ export class Line extends Component { return parentDatum.data; }) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "line") + .attr("aria-label", d => d.map(datum => datum.value || datum).join(",")) + // Transition .transition(this.services.transitions.getTransition("line-update-enter", animate)) .attr("opacity", 1) .attr("class", "line") diff --git a/packages/core/src/components/graphs/pie.ts b/packages/core/src/components/graphs/pie.ts index 18638c0a7a..95e7749421 100644 --- a/packages/core/src/components/graphs/pie.ts +++ b/packages/core/src/components/graphs/pie.ts @@ -2,7 +2,7 @@ import { Component } from "../component"; import { DOMUtils } from "../../services"; import { Tools } from "../../tools"; -import { CalloutDirections, TooltipTypes } from "../../interfaces/enums"; +import { CalloutDirections, Roles, TooltipTypes } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; @@ -81,7 +81,9 @@ export class Pie extends Component { .sort((a: any, b: any) => a.index - b.index); // Update data on all slices - const paths = DOMUtils.appendOrSelect(svg, "g.slices").selectAll("path.slice") + const slicesGroup = DOMUtils.appendOrSelect(svg, "g.slices") + .attr("role", Roles.GROUP); + const paths = slicesGroup.selectAll("path.slice") .data(pieLayoutData, d => d.data.label); // Remove slices that need to be exited @@ -101,13 +103,18 @@ export class Pie extends Component { .attr("d", this.arc) .transition(this.services.transitions.getTransition("pie-slice-enter-update", animate)) .attr("opacity", 1) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "slice") + .attr("aria-label", d => `${d.value}, ${Tools.convertValueToPercentage(d.data.value, dataList) + "%"}`) + // Tween .attrTween("d", function (a) { return arcTween.bind(this)(a, self.arc); }); // Draw the slice labels - const labels = DOMUtils.appendOrSelect(svg, "g.labels") - .selectAll("text.pie-label") + const labelsGroup = DOMUtils.appendOrSelect(svg, "g.labels").attr("role", Roles.GROUP); + const labels = labelsGroup.selectAll("text.pie-label") .data(pieLayoutData, (d: any) => d.data.label); // Remove labels that are existing @@ -193,7 +200,8 @@ export class Pie extends Component { } renderCallouts(calloutData: any[]) { - const svg = DOMUtils.appendOrSelect(this.getContainerSVG(), "g.callouts"); + const svg = DOMUtils.appendOrSelect(this.getContainerSVG(), "g.callouts") + .attr("role", Roles.GROUP); const options = this.model.getOptions(); // Update data on callouts @@ -204,7 +212,10 @@ export class Pie extends Component { const enteringCallouts = callouts.enter() .append("g") - .classed("callout", true); + .classed("callout", true) + // a11y + .attr("role", `${Roles.GRAPHICS_SYMBOL} ${Roles.GROUP}`) + .attr("aria-roledescription", "label callout"); // Update data values for each callout // For the horizontal and vertical lines to use diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts index 6ade3280df..e369a40f77 100644 --- a/packages/core/src/components/graphs/scatter.ts +++ b/packages/core/src/components/graphs/scatter.ts @@ -1,9 +1,9 @@ // Internal Imports import { Component } from "../component"; +import { TooltipTypes, Roles } from "../../interfaces"; // D3 Imports import { select } from "d3-selection"; -import { TooltipTypes } from "../../interfaces"; export class Scatter extends Component { type = "scatter"; @@ -37,7 +37,8 @@ export class Scatter extends Component { // Add the dot groups that need to be introduced const dotGroupsEnter = dotGroups.enter() .append("g") - .classed("dots", true); + .classed("dots", true) + .attr("role", Roles.GROUP); // Update data on all circles const dots = dotGroupsEnter.merge(dotGroups) @@ -67,7 +68,11 @@ export class Scatter extends Component { }) .attr("fill-opacity", filled ? 0.2 : 1) .attr("stroke", d => this.model.getStrokeColor(d.datasetLabel, d.label, d.value)) - .attr("opacity", 1); + .attr("opacity", 1) + // a11y + .attr("role", Roles.GRAPHICS_SYMBOL) + .attr("aria-roledescription", "point") + .attr("aria-label", d => d.value); // Add event listeners to elements drawn this.addEventListeners(); diff --git a/packages/core/src/components/index.ts b/packages/core/src/components/index.ts index e060733ee9..78dc364ad0 100644 --- a/packages/core/src/components/index.ts +++ b/packages/core/src/components/index.ts @@ -16,9 +16,12 @@ export * from "./graphs/scatter"; export * from "./graphs/pie"; export * from "./graphs/donut"; +// Layout +export * from "./layout/spacer"; +export * from "./layout/layout"; + // MISC export * from "./axes/two-dimensional-axes"; export * from "./axes/axis"; export * from "./axes/grid"; export * from "./axes/horizontal-zero-line"; -export * from "./layout/layout"; diff --git a/packages/core/src/components/layout/spacer.ts b/packages/core/src/components/layout/spacer.ts new file mode 100644 index 0000000000..7d53e716e0 --- /dev/null +++ b/packages/core/src/components/layout/spacer.ts @@ -0,0 +1,16 @@ +// Internal Imports +import { Component } from "../component"; +import * as Configuration from "../../configuration"; + +export class Spacer extends Component { + type = "spacer"; + + render() { + this.getContainerSVG().append("rect") + .attr("x", 0) + .attr("y", 0) + .attr("width", this.configs.size || Configuration.spacers.default.size) + .attr("height", this.configs.size || Configuration.spacers.default.size) + .attr("opacity", 0); + } +} diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 0b336b57ee..b26d10cc14 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -273,3 +273,9 @@ export const axis = { rotateIfSmallerThan: 30 } }; + +export const spacers = { + default: { + size: 24 + } +}; diff --git a/packages/core/src/interfaces/a11y.ts b/packages/core/src/interfaces/a11y.ts new file mode 100644 index 0000000000..0061d9bf02 --- /dev/null +++ b/packages/core/src/interfaces/a11y.ts @@ -0,0 +1,6 @@ +export enum Roles { + GRAPHICS_DOCUMENT = "graphics-document", + GRAPHICS_OBJECT = "graphics-object", + GRAPHICS_SYMBOL = "graphics-symbol", + GROUP = "group" +} diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts index 144b45ca6e..7e21896aa8 100644 --- a/packages/core/src/interfaces/charts.ts +++ b/packages/core/src/interfaces/charts.ts @@ -6,10 +6,6 @@ import { ChartTheme } from "./enums"; * Base chart options common to any chart */ export interface BaseChartOptions { - /** - * boolean to enable accessibility mode - */ - accessibility?: boolean; /** * boolean to disable animations (enabled by default) */ diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index 0ba7541fac..323591f803 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -56,7 +56,7 @@ export interface TooltipOptions { /** * a function to format the tooltip values */ - formatter?: Function; + valueFormatter?: Function; /** * custom function for returning tooltip HTML * passed an array or object with the data, and then the default tooltip markup diff --git a/packages/core/src/interfaces/index.ts b/packages/core/src/interfaces/index.ts index 281db0405d..73f0ed7253 100644 --- a/packages/core/src/interfaces/index.ts +++ b/packages/core/src/interfaces/index.ts @@ -1,3 +1,4 @@ +export * from "./a11y"; export * from "./axis-scales"; export * from "./charts"; export * from "./components"; diff --git a/packages/core/src/styles/components/_grid.scss b/packages/core/src/styles/components/_grid.scss index 8a67b1f0ee..7ea6c48b55 100644 --- a/packages/core/src/styles/components/_grid.scss +++ b/packages/core/src/styles/components/_grid.scss @@ -1,11 +1,11 @@ .#{$prefix}--#{$charts-prefix}--grid { rect.chart-grid-backdrop { - @if $carbon--theme == $carbon--theme--g90 { + @if $carbon--theme == $carbon--theme--g10 { + fill: $ui-01; + } @else if $carbon--theme == $carbon--theme--g90 { fill: $carbon--gray-100; - } @else if $carbon--theme == $carbon--theme--g100 { - fill: $carbon--black-100; } @else { - fill: $ui-01; + fill: $ui-background; } } diff --git a/packages/core/src/styles/graphs/_line.scss b/packages/core/src/styles/graphs/_line.scss index 9b0c93d4af..2d5a058f0e 100644 --- a/packages/core/src/styles/graphs/_line.scss +++ b/packages/core/src/styles/graphs/_line.scss @@ -1,5 +1,5 @@ .#{$prefix}--#{$charts-prefix}--line path.line { pointer-events: none; fill: none; - stroke-width: 1.75; + stroke-width: 1.5; } diff --git a/packages/core/src/styles/graphs/_scatter.scss b/packages/core/src/styles/graphs/_scatter.scss index d98609f567..77965b5092 100644 --- a/packages/core/src/styles/graphs/_scatter.scss +++ b/packages/core/src/styles/graphs/_scatter.scss @@ -9,6 +9,7 @@ g.#{$prefix}--#{$charts-prefix}--scatter { circle.dot.unfilled { fill: $ui-01; + stroke-width: 1.5; } g.lines path.line { diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index d264324d64..3c891a8ce0 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -3,6 +3,46 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.24.0](https://github.com/IBM/carbon-charts/compare/v0.23.0...v0.24.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-react + + + + + +# [0.23.0](https://github.com/IBM/carbon-charts/compare/v0.22.4...v0.23.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-react + + + + + +## [0.22.4](https://github.com/IBM/carbon-charts/compare/v0.22.3...v0.22.4) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-react + + + + + +## [0.22.3](https://github.com/IBM/carbon-charts/compare/v0.22.2...v0.22.3) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-react + + + + + +## [0.22.2](https://github.com/IBM/carbon-charts/compare/v0.22.1...v0.22.2) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-react + + + + + ## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12) **Note:** Version bump only for package @carbon/charts-react diff --git a/packages/react/package.json b/packages/react/package.json index bc77415a02..4770f4dde6 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-react", - "version": "0.22.1", + "version": "0.24.0", "description": "Carbon charting components for React", "main": "./bundle.js", "scripts": { @@ -44,7 +44,7 @@ }, "homepage": "https://github.com/IBM/carbon-charts#readme", "dependencies": { - "@carbon/charts": "^0.22.1" + "@carbon/charts": "^0.24.0" }, "peerDependencies": { "react": "^16.6.3", diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md index c98aafb0f5..eadc399e80 100644 --- a/packages/vue/CHANGELOG.md +++ b/packages/vue/CHANGELOG.md @@ -3,6 +3,46 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.24.0](https://github.com/IBM/carbon-charts/compare/v0.23.0...v0.24.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + +# [0.23.0](https://github.com/IBM/carbon-charts/compare/v0.22.4...v0.23.0) (2019-12-17) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + +## [0.22.4](https://github.com/IBM/carbon-charts/compare/v0.22.3...v0.22.4) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + +## [0.22.3](https://github.com/IBM/carbon-charts/compare/v0.22.2...v0.22.3) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + +## [0.22.2](https://github.com/IBM/carbon-charts/compare/v0.22.1...v0.22.2) (2019-12-16) + +**Note:** Version bump only for package @carbon/charts-vue + + + + + ## [0.22.1](https://github.com/IBM/carbon-charts/compare/v0.22.0...v0.22.1) (2019-12-12) **Note:** Version bump only for package @carbon/charts-vue diff --git a/packages/vue/README.md b/packages/vue/README.md index 6cb01eb2e8..81e63aa26d 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -24,6 +24,9 @@ yarn add @carbon/charts @carbon/charts-vue d3 ## Step-by-step Instructions [Read on carbondesignsystem.com](https://www.carbondesignsystem.com/data-visualization/getting-started/vue) +## Sample Project +[![Edit Carbon Charts - React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/carbon-charts-vue-gg15t) + ## Charting Data & Options Although we will definitely introduce new models in the future as we start shipping new components such as maps, Data and options follow the same model in all charts, with minor exceptions and differences in specific components, . diff --git a/packages/vue/package.json b/packages/vue/package.json index bbf05fe344..c2f57d91be 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@carbon/charts-vue", - "version": "0.22.1", + "version": "0.24.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.22.1", + "@carbon/charts": "^0.24.0", "vue": "2.5.21" }, "devDependencies": {