From c00d4f5d674cb3e9b796c285b99135af66964487 Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Tue, 25 Aug 2020 14:42:01 +0800 Subject: [PATCH 1/8] feat: enable chart grid enable option --- packages/core/src/components/axes/grid.ts | 8 ++++++++ packages/core/src/components/axes/ruler.ts | 7 ++++++- packages/core/src/configuration.ts | 2 ++ packages/core/src/interfaces/components.ts | 1 + packages/core/src/styles/components/_grid.scss | 10 ++++++++++ 5 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index 4d6513b5b2..cb87defdd6 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -12,6 +12,14 @@ export class Grid extends Component { backdrop: any; render(animate = true) { + const gridEnable = Tools.getProperty( + this.model.getOptions(), + "grid", + "enable" + ); + if (!gridEnable) { + return; + } // Draw the backdrop this.drawBackdrop(); DOMUtils.appendOrSelect(this.backdrop, "g.x.grid"); diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index 84daee4dfa..fffeb9d828 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -24,6 +24,11 @@ export class Ruler extends Component { domainValue: number; originalData: any; }[]; + gridEnable = Tools.getProperty( + this.model.getOptions(), + "grid", + "enable" + ); render() { this.drawBackdrop(); @@ -231,7 +236,7 @@ export class Ruler extends Component { this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop"); const backdropRect = DOMUtils.appendOrSelect( this.backdrop, - "rect.chart-grid-backdrop" + this.gridEnable? "rect.chart-grid-backdrop" : "rect.chart-grid-backdrop-no-stroke" ); this.backdrop diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 44848794b4..44bd9baeb3 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -61,6 +61,8 @@ const legend: LegendOptions = { * Grid options */ export const grid: GridOptions = { + // set enable to false will not draw grid and stroke of grid backdrop + enable: true, x: { numberOfTicks: 15 }, diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index 5dab21f3eb..67d1329d4b 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -84,6 +84,7 @@ export interface ThresholdOptions { } export interface GridOptions { + enable: boolean; y?: { numberOfTicks?: number; }; diff --git a/packages/core/src/styles/components/_grid.scss b/packages/core/src/styles/components/_grid.scss index 0a9993ec3d..2c7d855828 100644 --- a/packages/core/src/styles/components/_grid.scss +++ b/packages/core/src/styles/components/_grid.scss @@ -10,6 +10,16 @@ stroke: $ui-03; } + rect.chart-grid-backdrop-no-stroke { + @if $carbon--theme == $carbon--theme--g10 { + fill: $ui-01; + } @else if $carbon--theme == $carbon--theme--g90 { + fill: $carbon--gray-100; + } @else { + fill: $ui-background; + } + } + g.x.grid g.tick, g.y.grid g.tick { line { From 426d2a9bfdc319e4f1687d9cb6a5ab8f97eac92a Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Tue, 25 Aug 2020 22:05:04 +0800 Subject: [PATCH 2/8] refactor: rename grid option --- packages/core/src/components/axes/grid.ts | 2 +- packages/core/src/configuration.ts | 2 +- packages/core/src/interfaces/components.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index cb87defdd6..baaf4bfdc3 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -15,7 +15,7 @@ export class Grid extends Component { const gridEnable = Tools.getProperty( this.model.getOptions(), "grid", - "enable" + "enabled" ); if (!gridEnable) { return; diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 44bd9baeb3..cfa033e32d 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -62,7 +62,7 @@ const legend: LegendOptions = { */ export const grid: GridOptions = { // set enable to false will not draw grid and stroke of grid backdrop - enable: true, + enabled: false, x: { numberOfTicks: 15 }, diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index 67d1329d4b..d70f941988 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -84,7 +84,7 @@ export interface ThresholdOptions { } export interface GridOptions { - enable: boolean; + enabled?: boolean; y?: { numberOfTicks?: number; }; From 96728403b94e9c5796e3fb7ab57968873d00173b Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Wed, 26 Aug 2020 09:59:39 +0800 Subject: [PATCH 3/8] refactor: rename gridEnabled to isGridEnabled --- packages/core/src/components/axes/grid.ts | 5 +++-- packages/core/src/components/axes/ruler.ts | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index baaf4bfdc3..4a4cfd403c 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -12,12 +12,13 @@ export class Grid extends Component { backdrop: any; render(animate = true) { - const gridEnable = Tools.getProperty( + const isGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", "enabled" ); - if (!gridEnable) { + + if (!isGridEnabled) { return; } // Draw the backdrop diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index fffeb9d828..7354868d40 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -24,7 +24,7 @@ export class Ruler extends Component { domainValue: number; originalData: any; }[]; - gridEnable = Tools.getProperty( + isGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", "enable" @@ -236,7 +236,7 @@ export class Ruler extends Component { this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop"); const backdropRect = DOMUtils.appendOrSelect( this.backdrop, - this.gridEnable? "rect.chart-grid-backdrop" : "rect.chart-grid-backdrop-no-stroke" + this.isGridEnabled ? "rect.chart-grid-backdrop" : "rect.chart-grid-backdrop-no-stroke" ); this.backdrop From 4de05e1e6771bf28ff0a1366bd9d749de72e9753 Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Wed, 26 Aug 2020 10:06:40 +0800 Subject: [PATCH 4/8] fix: enable grid as default setting --- packages/core/src/components/axes/ruler.ts | 6 ++++-- packages/core/src/configuration.ts | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index 7354868d40..87f620c39f 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -27,7 +27,7 @@ export class Ruler extends Component { isGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", - "enable" + "enabled" ); render() { @@ -236,7 +236,9 @@ export class Ruler extends Component { this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop"); const backdropRect = DOMUtils.appendOrSelect( this.backdrop, - this.isGridEnabled ? "rect.chart-grid-backdrop" : "rect.chart-grid-backdrop-no-stroke" + this.isGridEnabled + ? "rect.chart-grid-backdrop" + : "rect.chart-grid-backdrop-no-stroke" ); this.backdrop diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index cfa033e32d..6cdd0cfc32 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -62,7 +62,7 @@ const legend: LegendOptions = { */ export const grid: GridOptions = { // set enable to false will not draw grid and stroke of grid backdrop - enabled: false, + enabled: true, x: { numberOfTicks: 15 }, From 965513b3f74466470df755d9dbb986da5b8bef0b Mon Sep 17 00:00:00 2001 From: Jennifer Chao Date: Wed, 26 Aug 2020 10:54:56 +0800 Subject: [PATCH 5/8] feat: enable or disable x and y grid separately --- packages/core/src/components/axes/grid.ts | 32 +++++++++++++------ packages/core/src/components/axes/ruler.ts | 15 ++++++--- packages/core/src/configuration.ts | 4 ++- packages/core/src/interfaces/components.ts | 4 ++- .../core/src/styles/components/_grid.scss | 12 ++----- 5 files changed, 40 insertions(+), 27 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index 4a4cfd403c..f0791276e3 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -12,22 +12,32 @@ export class Grid extends Component { backdrop: any; render(animate = true) { - const isGridEnabled = Tools.getProperty( + const isXGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", - "enabled" + "xGridEnabled" + ); + const isYGridEnabled = Tools.getProperty( + this.model.getOptions(), + "grid", + "yGridEnabled" ); - if (!isGridEnabled) { + if (!isXGridEnabled && !isYGridEnabled) { return; } // Draw the backdrop - this.drawBackdrop(); - DOMUtils.appendOrSelect(this.backdrop, "g.x.grid"); - DOMUtils.appendOrSelect(this.backdrop, "g.y.grid"); + this.drawBackdrop(isXGridEnabled, isYGridEnabled); - this.drawXGrid(animate); - this.drawYGrid(animate); + if (isXGridEnabled) { + DOMUtils.appendOrSelect(this.backdrop, "g.x.grid"); + this.drawXGrid(animate); + } + + if (isYGridEnabled) { + DOMUtils.appendOrSelect(this.backdrop, "g.y.grid"); + this.drawYGrid(animate); + } } drawXGrid(animate: boolean) { @@ -193,7 +203,7 @@ export class Grid extends Component { return xGridlines; } - drawBackdrop() { + drawBackdrop(isXGridEnabled, isYGridEnabled) { const svg = this.parent; const mainXScale = this.services.cartesianScales.getMainXScale(); @@ -206,7 +216,9 @@ export class Grid extends Component { this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop"); const backdropRect = DOMUtils.appendOrSelect( this.backdrop, - "rect.chart-grid-backdrop" + isXGridEnabled || isYGridEnabled + ? "rect.chart-grid-backdrop.stroke" + : "rect.chart-grid-backdrop" ); this.backdrop diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index 87f620c39f..4a6b1b7813 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -24,10 +24,15 @@ export class Ruler extends Component { domainValue: number; originalData: any; }[]; - isGridEnabled = Tools.getProperty( + isXGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", - "enabled" + "xGridEnabled" + ); + isYGridEnabled = Tools.getProperty( + this.model.getOptions(), + "grid", + "yGridEnabled" ); render() { @@ -236,9 +241,9 @@ export class Ruler extends Component { this.backdrop = DOMUtils.appendOrSelect(svg, "svg.chart-grid-backdrop"); const backdropRect = DOMUtils.appendOrSelect( this.backdrop, - this.isGridEnabled - ? "rect.chart-grid-backdrop" - : "rect.chart-grid-backdrop-no-stroke" + this.isXGridEnabled || this.isYGridEnabled + ? "rect.chart-grid-backdrop.stroke" + : "rect.chart-grid-backdrop" ); this.backdrop diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 6cdd0cfc32..9611e89f4a 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -62,7 +62,9 @@ const legend: LegendOptions = { */ export const grid: GridOptions = { // set enable to false will not draw grid and stroke of grid backdrop - enabled: true, + xGridEnabled: true, + yGridEnabled: true, + x: { numberOfTicks: 15 }, diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index d70f941988..d896699bc0 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -84,7 +84,9 @@ export interface ThresholdOptions { } export interface GridOptions { - enabled?: boolean; + xGridEnabled?: boolean; + yGridEnabled?: boolean; + y?: { numberOfTicks?: number; }; diff --git a/packages/core/src/styles/components/_grid.scss b/packages/core/src/styles/components/_grid.scss index 2c7d855828..f71f286b6a 100644 --- a/packages/core/src/styles/components/_grid.scss +++ b/packages/core/src/styles/components/_grid.scss @@ -7,17 +7,9 @@ } @else { fill: $ui-background; } - stroke: $ui-03; } - - rect.chart-grid-backdrop-no-stroke { - @if $carbon--theme == $carbon--theme--g10 { - fill: $ui-01; - } @else if $carbon--theme == $carbon--theme--g90 { - fill: $carbon--gray-100; - } @else { - fill: $ui-background; - } + rect.stroke { + stroke: $ui-03; } g.x.grid g.tick, From a5ea445c38498ff3fd92719e107b44d6f16b94f7 Mon Sep 17 00:00:00 2001 From: JennChao Date: Tue, 1 Sep 2020 18:43:48 +0800 Subject: [PATCH 6/8] refactor: interface modification for xGridEnabled and yGridEnabled --- packages/core/src/components/axes/grid.ts | 2 ++ packages/core/src/configuration.ts | 8 ++++---- packages/core/src/interfaces/components.ts | 5 ++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index f0791276e3..7e8099b10c 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -15,11 +15,13 @@ export class Grid extends Component { const isXGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", + "x", "xGridEnabled" ); const isYGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", + "y", "yGridEnabled" ); diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 9611e89f4a..79042cb97f 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -61,14 +61,14 @@ const legend: LegendOptions = { * Grid options */ export const grid: GridOptions = { - // set enable to false will not draw grid and stroke of grid backdrop - xGridEnabled: true, - yGridEnabled: true, - x: { + // set enable to false will not draw grid and stroke of grid backdrop + xGridEnabled: false, numberOfTicks: 15 }, y: { + // set enable to false will not draw grid and stroke of grid backdrop + yGridEnabled: false, numberOfTicks: 5 } }; diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index d896699bc0..3ad93cf1c3 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -84,13 +84,12 @@ export interface ThresholdOptions { } export interface GridOptions { - xGridEnabled?: boolean; - yGridEnabled?: boolean; - y?: { + yGridEnabled?: boolean; numberOfTicks?: number; }; x?: { + xGridEnabled?: boolean; numberOfTicks?: number; }; } From ec9212a560ccea4d4ee45f6bc3bf9b4148ab1eb3 Mon Sep 17 00:00:00 2001 From: JennChao Date: Wed, 2 Sep 2020 16:02:45 +0800 Subject: [PATCH 7/8] refactor: rename grid option --- packages/core/src/components/axes/grid.ts | 4 ++-- packages/core/src/components/axes/ruler.ts | 6 ++++-- packages/core/src/configuration.ts | 4 ++-- packages/core/src/interfaces/components.ts | 4 ++-- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index 7e8099b10c..2fb84728ba 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -16,13 +16,13 @@ export class Grid extends Component { this.model.getOptions(), "grid", "x", - "xGridEnabled" + "enabled" ); const isYGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", "y", - "yGridEnabled" + "enabled" ); if (!isXGridEnabled && !isYGridEnabled) { diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index 4a6b1b7813..d39efc3456 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -27,12 +27,14 @@ export class Ruler extends Component { isXGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", - "xGridEnabled" + "x", + "enabled" ); isYGridEnabled = Tools.getProperty( this.model.getOptions(), "grid", - "yGridEnabled" + "y", + "enabled" ); render() { diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index 79042cb97f..23e85f607e 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -63,12 +63,12 @@ const legend: LegendOptions = { export const grid: GridOptions = { x: { // set enable to false will not draw grid and stroke of grid backdrop - xGridEnabled: false, + enabled: true, numberOfTicks: 15 }, y: { // set enable to false will not draw grid and stroke of grid backdrop - yGridEnabled: false, + enabled: true, numberOfTicks: 5 } }; diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts index 3ad93cf1c3..d0e092ca7c 100644 --- a/packages/core/src/interfaces/components.ts +++ b/packages/core/src/interfaces/components.ts @@ -85,11 +85,11 @@ export interface ThresholdOptions { export interface GridOptions { y?: { - yGridEnabled?: boolean; + enabled?: boolean; numberOfTicks?: number; }; x?: { - xGridEnabled?: boolean; + enabled?: boolean; numberOfTicks?: number; }; } From 068846f5ef1a601b92a6babfdd5f2c1e9d29e339 Mon Sep 17 00:00:00 2001 From: JennChao Date: Mon, 7 Sep 2020 16:10:05 +0800 Subject: [PATCH 8/8] refactor: rename class --- packages/core/src/components/axes/grid.ts | 2 +- packages/core/src/components/axes/ruler.ts | 2 +- packages/core/src/styles/components/_grid.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/core/src/components/axes/grid.ts b/packages/core/src/components/axes/grid.ts index 2fb84728ba..bec9308813 100644 --- a/packages/core/src/components/axes/grid.ts +++ b/packages/core/src/components/axes/grid.ts @@ -219,7 +219,7 @@ export class Grid extends Component { const backdropRect = DOMUtils.appendOrSelect( this.backdrop, isXGridEnabled || isYGridEnabled - ? "rect.chart-grid-backdrop.stroke" + ? "rect.chart-grid-backdrop.stroked" : "rect.chart-grid-backdrop" ); diff --git a/packages/core/src/components/axes/ruler.ts b/packages/core/src/components/axes/ruler.ts index d39efc3456..ed5093ad54 100644 --- a/packages/core/src/components/axes/ruler.ts +++ b/packages/core/src/components/axes/ruler.ts @@ -244,7 +244,7 @@ export class Ruler extends Component { const backdropRect = DOMUtils.appendOrSelect( this.backdrop, this.isXGridEnabled || this.isYGridEnabled - ? "rect.chart-grid-backdrop.stroke" + ? "rect.chart-grid-backdrop.stroked" : "rect.chart-grid-backdrop" ); diff --git a/packages/core/src/styles/components/_grid.scss b/packages/core/src/styles/components/_grid.scss index f71f286b6a..cbcff2fb07 100644 --- a/packages/core/src/styles/components/_grid.scss +++ b/packages/core/src/styles/components/_grid.scss @@ -8,7 +8,7 @@ fill: $ui-background; } } - rect.stroke { + rect.chart-grid-backdrop.stroked { stroke: $ui-03; }