From 73e2344cb8f988ea2d16aebb2ce4afa51cff96fd Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Sat, 27 Apr 2019 22:28:04 -0400 Subject: [PATCH 01/16] Update demo site to use carbon v10 --- packages/core/demo/index.html | 4 +-- packages/core/demo/index.scss | 53 ++++++++--------------------------- 2 files changed, 14 insertions(+), 43 deletions(-) diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index 53d44c0162..fd97bb50c5 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -20,7 +20,7 @@ - + @@ -239,6 +239,6 @@

A reusable framework-agnostic D3 charting library.

- + diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss index 1fbe9f2b90..22098979ae 100644 --- a/packages/core/demo/index.scss +++ b/packages/core/demo/index.scss @@ -10,46 +10,6 @@ body { font-family: "IBM Plex Sans", Arial, sans-serif; } -h1 { - font-weight: 600; -} - -h3 { - margin-bottom: 40px; -} - -.button { - display: table; - padding: 12px 15px; - margin-bottom: 10px; - background: #0063ff; - color: #fff; - border: none; - font-size: 15px; - text-decoration: none; -} - -// Carbon overrides -$due_blue: #0063ff; - -.bx--btn--primary { - background: $due_blue; - outline: none !important; - border: none !important; - - &:hover { - background: #0059e4; - } - - &:active { - background: #003992; - } -} - -.bx--overflow-menu-options { - outline: none; -} - header.m-demo-header { margin-bottom: 20px; padding: 50px 0; @@ -83,6 +43,8 @@ header.m-demo-header { .bx--btn { float: left; margin-right: 5px; + max-height: 30px; + padding-right: 15px; &.last { margin-right: 0; @@ -112,7 +74,16 @@ header.m-demo-header { } h1 { - margin-bottom: 5px; + font-size: 2.25rem; + font-weight: 600; + margin-top: 20px; + margin-bottom: 10px; + } + + h3 { + font-size: 1.25rem; + font-weight: 300; + margin-bottom: 45px; } } } From 1421b99316dd34794182444dc70b96361b1eab08 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Sun, 28 Apr 2019 00:55:25 -0400 Subject: [PATCH 02/16] Add themes --- packages/core/demo/demo-data/colors.ts | 19 ++++++---- packages/core/src/index.ts | 5 +++ packages/core/src/services/colors.ts | 48 ++++++++++++++++++++++++++ packages/core/src/services/themes.ts | 26 ++++++++++++++ 4 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 packages/core/src/services/colors.ts create mode 100644 packages/core/src/services/themes.ts diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index 32ed972508..8783d20a7a 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -1,12 +1,17 @@ +import { + colors as colorsService, + themes +} from "../../src/index" + export const colors = window["isExperimental"] ? [ - "#418cff", // Blue 60 - "#3dbb61", // Green 40 - "#ee538b", // Magenta 50 - "#0058a1", // Cyan 70 - "#fb4b53", // Red 50 - "#8a3ffc", // Purple 60 - "#00bab6" // Teal 40 + colorsService.purple(60), + colorsService.teal(30), + colorsService.magenta(50), + colorsService.cyan(40), + colorsService.magenta(60), + colorsService.purple(30), + colorsService.cyan(80) ]: [ "#00a68f", diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 10294ca75f..d422ee0105 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -10,11 +10,16 @@ import { LineChart } from "./line-chart"; import { ComboChart } from "./combo-chart"; import { ScatterChart } from "./scatter-chart"; +import colors from "./services/colors"; import * as Configuration from "./configuration"; const defaultColors = Configuration.options.BASE.colors; +import * as themes from "./services/themes"; + export { + colors, defaultColors, + themes, BaseChart, BaseAxisChart, PieChart, diff --git a/packages/core/src/services/colors.ts b/packages/core/src/services/colors.ts new file mode 100644 index 0000000000..d952df99bc --- /dev/null +++ b/packages/core/src/services/colors.ts @@ -0,0 +1,48 @@ +const purplePalette = { + 30: "#d0b0ff", + 40: "#bb8eff", + 50: "#a970ff", + 60: "#8a3ffc", + 70: "#6e32c9", + 80: "#4f2196", + 90: "#38146b" +}; + +const magentaPalette = { + 30: "#ffa0c2", + 40: "#fa75a6", + 50: "#ee538b", + 60: "#d12765", + 70: "#a11950", + 80: "#760a3a", + 90: "#57002b" +}; + +const cyanPalette = { + 30: "#6ccaff", + 40: "#30b0ff", + 50: "#1193e8", + 60: "#0072c3", + 70: "#0058a1", + 80: "#003d73", + 90: "#002b50" +}; + +const tealPalette = { + 30: "#20d5d2", + 40: "#00bab6", + 50: "#009e9a", + 60: "#007d79", + 70: "#006161", + 80: "#004548", + 90: "#003137" +}; + +const getColor = (obj, shade) => obj[shade]; + +export default { + purple: shade => getColor(purplePalette, shade), + magenta: shade => getColor(magentaPalette, shade), + cyan: shade => getColor(cyanPalette, shade), + teal: shade => getColor(tealPalette, shade) +} diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts new file mode 100644 index 0000000000..7c885873ee --- /dev/null +++ b/packages/core/src/services/themes.ts @@ -0,0 +1,26 @@ +import colors from "./colors"; + +// Generates array of color values +// For all available colors within the shades provided +const generateTheme = (firstShade, secondShade) => { + const firstPalette = []; + const secondPalette = []; + + const colorKeys = Object.keys(colors); + for (let i = 0; i < 2; i++) { + colorKeys.forEach((colorKey, j) => { + const shadeToUse = (i + j) % 2 === 0 ? secondShade : firstShade; + console.log("shadeToUse", colorKey, shadeToUse) + firstPalette.push( + colors[colorKey](shadeToUse) + ); + }); + } + + return firstPalette.concat(secondPalette); +} + +export const HC_1 = generateTheme(80, 50); +export const HC_2 = generateTheme(70, 40); +export const HC_3 = generateTheme(60, 40); +export const HC_4 = generateTheme(80, 40); From 3b6d14ae2b5e33b52b10474267826df1702a3bf5 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Sun, 28 Apr 2019 00:57:03 -0400 Subject: [PATCH 03/16] Fix lint issues --- packages/core/src/services/colors.ts | 66 ++++++++++++++-------------- packages/core/src/services/themes.ts | 28 ++++++------ 2 files changed, 47 insertions(+), 47 deletions(-) diff --git a/packages/core/src/services/colors.ts b/packages/core/src/services/colors.ts index d952df99bc..3a49f740d7 100644 --- a/packages/core/src/services/colors.ts +++ b/packages/core/src/services/colors.ts @@ -1,48 +1,48 @@ const purplePalette = { - 30: "#d0b0ff", - 40: "#bb8eff", - 50: "#a970ff", - 60: "#8a3ffc", - 70: "#6e32c9", - 80: "#4f2196", - 90: "#38146b" + 30: "#d0b0ff", + 40: "#bb8eff", + 50: "#a970ff", + 60: "#8a3ffc", + 70: "#6e32c9", + 80: "#4f2196", + 90: "#38146b" }; const magentaPalette = { - 30: "#ffa0c2", - 40: "#fa75a6", - 50: "#ee538b", - 60: "#d12765", - 70: "#a11950", - 80: "#760a3a", - 90: "#57002b" + 30: "#ffa0c2", + 40: "#fa75a6", + 50: "#ee538b", + 60: "#d12765", + 70: "#a11950", + 80: "#760a3a", + 90: "#57002b" }; const cyanPalette = { - 30: "#6ccaff", - 40: "#30b0ff", - 50: "#1193e8", - 60: "#0072c3", - 70: "#0058a1", - 80: "#003d73", - 90: "#002b50" + 30: "#6ccaff", + 40: "#30b0ff", + 50: "#1193e8", + 60: "#0072c3", + 70: "#0058a1", + 80: "#003d73", + 90: "#002b50" }; const tealPalette = { - 30: "#20d5d2", - 40: "#00bab6", - 50: "#009e9a", - 60: "#007d79", - 70: "#006161", - 80: "#004548", - 90: "#003137" + 30: "#20d5d2", + 40: "#00bab6", + 50: "#009e9a", + 60: "#007d79", + 70: "#006161", + 80: "#004548", + 90: "#003137" }; const getColor = (obj, shade) => obj[shade]; export default { - purple: shade => getColor(purplePalette, shade), - magenta: shade => getColor(magentaPalette, shade), - cyan: shade => getColor(cyanPalette, shade), - teal: shade => getColor(tealPalette, shade) -} + purple: shade => getColor(purplePalette, shade), + magenta: shade => getColor(magentaPalette, shade), + cyan: shade => getColor(cyanPalette, shade), + teal: shade => getColor(tealPalette, shade) +}; diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts index 7c885873ee..698720f0b3 100644 --- a/packages/core/src/services/themes.ts +++ b/packages/core/src/services/themes.ts @@ -3,22 +3,22 @@ import colors from "./colors"; // Generates array of color values // For all available colors within the shades provided const generateTheme = (firstShade, secondShade) => { - const firstPalette = []; - const secondPalette = []; + const firstPalette = []; + const secondPalette = []; - const colorKeys = Object.keys(colors); - for (let i = 0; i < 2; i++) { - colorKeys.forEach((colorKey, j) => { - const shadeToUse = (i + j) % 2 === 0 ? secondShade : firstShade; - console.log("shadeToUse", colorKey, shadeToUse) - firstPalette.push( - colors[colorKey](shadeToUse) - ); - }); - } + const colorKeys = Object.keys(colors); + for (let i = 0; i < 2; i++) { + colorKeys.forEach((colorKey, j) => { + const shadeToUse = (i + j) % 2 === 0 ? secondShade : firstShade; + console.log("shadeToUse", colorKey, shadeToUse); + firstPalette.push( + colors[colorKey](shadeToUse) + ); + }); + } - return firstPalette.concat(secondPalette); -} + return firstPalette.concat(secondPalette); +}; export const HC_1 = generateTheme(80, 50); export const HC_2 = generateTheme(70, 40); From 38eb428a478dbd3c008bff94043ddea994d8387d Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Sun, 28 Apr 2019 14:58:41 -0400 Subject: [PATCH 04/16] Add padding between slices for pie & donut --- packages/core/src/pie-chart.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts index cee18f1ec8..9e4e339bb1 100644 --- a/packages/core/src/pie-chart.ts +++ b/packages/core/src/pie-chart.ts @@ -130,12 +130,13 @@ export class PieChart extends BaseChart { // Compute the correct inner & outer radius const marginedRadius = this.computeRadius(); this.arc = arc() - .innerRadius(this.options.type === "donut" ? (marginedRadius * (2 / 3)) : 0) + .innerRadius(this.options.type === "donut" ? (marginedRadius * (2 / 3)) : 1) .outerRadius(marginedRadius); this.pie = pie() .value((d: any) => d.value) - .sort(null); + .sort(null) + .padAngle(0.007); // Draw the slices this.path = this.innerWrap.selectAll("path") From a0e347b8a495fe4d369dd4f837a491a434bf7ac6 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Sun, 28 Apr 2019 15:38:36 -0400 Subject: [PATCH 05/16] Updater innerRadius of donut chart --- packages/core/src/pie-chart.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts index 9e4e339bb1..bf8e1431dd 100644 --- a/packages/core/src/pie-chart.ts +++ b/packages/core/src/pie-chart.ts @@ -130,7 +130,7 @@ export class PieChart extends BaseChart { // Compute the correct inner & outer radius const marginedRadius = this.computeRadius(); this.arc = arc() - .innerRadius(this.options.type === "donut" ? (marginedRadius * (2 / 3)) : 1) + .innerRadius(this.options.type === "donut" ? (marginedRadius * (3 / 4)) : 2) .outerRadius(marginedRadius); this.pie = pie() @@ -373,7 +373,7 @@ export class PieChart extends BaseChart { // Resize the arc this.arc = arc() - .innerRadius(this.options.type === "donut" ? (radius * (2 / 3)) : 0) + .innerRadius(this.options.type === "donut" ? (radius * (3 / 4)) : 2) .outerRadius(radius); this.innerWrap.selectAll("path") From b2ceafbd370aabd24cdab6c72cb47623ef570a52 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 29 Apr 2019 12:55:25 -0400 Subject: [PATCH 06/16] Show all themes on demo site --- packages/core/demo/demo-data/colors.ts | 38 ++++++++++++++++++++------ packages/core/demo/index.ts | 3 +- 2 files changed, 31 insertions(+), 10 deletions(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index 8783d20a7a..b96a05086f 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -3,16 +3,36 @@ import { themes } from "../../src/index" +const urlParams = new URLSearchParams(window.location.search); +const theme = parseInt(urlParams.get('theme')); + +let themeToUse = [ + colorsService.purple(60), + colorsService.teal(30), + colorsService.magenta(50), + colorsService.cyan(40), + colorsService.magenta(60), + colorsService.purple(30), + colorsService.cyan(80) +] + +switch(theme) { + case 2: + themeToUse = themes.HC_1; + break; + case 3: + themeToUse = themes.HC_2; + break; + case 4: + themeToUse = themes.HC_3; + break; + case 5: + themeToUse = themes.HC_4; + break; +} + export const colors = window["isExperimental"] ? - [ - colorsService.purple(60), - colorsService.teal(30), - colorsService.magenta(50), - colorsService.cyan(40), - colorsService.magenta(60), - colorsService.purple(30), - colorsService.cyan(80) - ]: + themeToUse: [ "#00a68f", "#3b1a40", diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts index 3d7ddce8ed..32f3357967 100644 --- a/packages/core/demo/index.ts +++ b/packages/core/demo/index.ts @@ -22,7 +22,8 @@ const experimentalCheckbox = (experimentalSwitchWrapper.querySelector("input#tog const { location } = window; if (location) { - window["isExperimental"] = location.search.replace("?experimental=", "") === "true"; + const urlParams = new URLSearchParams(window.location.search); + window["isExperimental"] = urlParams.get('experimental'); experimentalCheckbox.checked = window["isExperimental"]; experimentalSwitchWrapper.querySelector("label.bx--toggle__label").addEventListener("click", () => { From 12b3135650c6a62bb92ac32231bb1618082011f0 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 29 Apr 2019 13:13:19 -0400 Subject: [PATCH 07/16] Trigger build --- packages/core/demo/demo-data/colors.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index b96a05086f..6f72453e43 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -5,7 +5,6 @@ import { const urlParams = new URLSearchParams(window.location.search); const theme = parseInt(urlParams.get('theme')); - let themeToUse = [ colorsService.purple(60), colorsService.teal(30), From fb17384f951ffa4107a6a921f8d823393cc0563d Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 29 Apr 2019 22:36:21 -0400 Subject: [PATCH 08/16] Multiply blending mode for line chart lines --- packages/core/src/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 9992dc5c72..5efecb90a3 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -47,6 +47,7 @@ div.chart-holder { &.line { fill: none; stroke-width: 2; + mix-blend-mode: multiply; &:hover { cursor: default; From ae0d1f6634ae80f0030f5c54ab5e064043e2853a Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Mon, 29 Apr 2019 23:22:39 -0400 Subject: [PATCH 09/16] Scatter chart fill and point size updates --- packages/core/demo/demo-data/line.ts | 3 --- packages/core/src/configuration.ts | 13 ++++++++----- packages/core/src/scatter-chart.ts | 20 ++++++++++++++++++-- packages/core/src/style.scss | 2 +- 4 files changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/core/demo/demo-data/line.ts b/packages/core/demo/demo-data/line.ts index 1999060f9a..2be1e5c5a0 100644 --- a/packages/core/demo/demo-data/line.ts +++ b/packages/core/demo/demo-data/line.ts @@ -132,9 +132,6 @@ export const lineOptions = { ] } }, - points: { - radius: 4 - }, legendClickable: true, containerResizable: true }; diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index ff26dda574..ad518beed4 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -295,6 +295,7 @@ export interface LineChartOptions extends AxisChartOptions { * sets the radius of the point */ radius: number; + fillOpacity?: number; }; } /** @@ -302,8 +303,8 @@ export interface LineChartOptions extends AxisChartOptions { */ const lineOptions: LineChartOptions = Tools.merge({}, axisOptions, { points: { - // default point radius to 4 - radius: 4 + // default point radius to 3 + radius: 3 } }); @@ -319,6 +320,7 @@ export interface ScatterChartOptions extends AxisChartOptions { * sets the radius of the point */ radius: number; + fillOpacity?: number; }; } /** @@ -327,7 +329,8 @@ export interface ScatterChartOptions extends AxisChartOptions { const scatterOptions: ScatterChartOptions = Tools.merge({}, axisOptions, { points: { // default point radius to 4 - radius: 4 + radius: 4, + fillOpacity: 0.3 } }); @@ -463,7 +466,7 @@ export const charts = { outline: "grey" }, points: { - radius: 4 + radius: 3 }, patternFills: { width: 20, @@ -564,7 +567,7 @@ export const bars = { export const lines = { points: { strokeWidth: 4, - minNonFilledRadius: 4, + minNonFilledRadius: 3, mouseover: { strokeWidth: 4, strokeOpacity: 0.5 diff --git a/packages/core/src/scatter-chart.ts b/packages/core/src/scatter-chart.ts index d4826ffa1e..dd587d9bd1 100644 --- a/packages/core/src/scatter-chart.ts +++ b/packages/core/src/scatter-chart.ts @@ -41,6 +41,7 @@ export class ScatterChart extends BaseAxisChart { .attr("cy", d => this.y(d.value)) .attr("r", circleRadius) .attr("fill", d => this.getCircleFill(circleRadius, d)) + .attr("fill-opacity", d => this.getCircleFillOpacity()) .attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value)); // Hide the overlay @@ -69,10 +70,24 @@ export class ScatterChart extends BaseAxisChart { } getCircleFill(radius, d) { - const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius; + // If the radius of the point is smaller than minimum + // Or the chart is only a scatter chart + // And not a line chart for instance + const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius || this.constructor === ScatterChart; + return circleShouldBeFilled ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : "white"; } + getCircleFillOpacity() { + // If the chart is only a scatter chart + // And not a line chart for instance + if (this.constructor === ScatterChart){ + return Configuration.options.SCATTER.points.fillOpacity; + } + + return null; + } + interpolateValues(newData: any) { const { line: margins } = Configuration.charts.margin; const chartSize = this.getChartSize(); @@ -104,6 +119,7 @@ export class ScatterChart extends BaseAxisChart { .transition(this.getDefaultTransition()) .style("opacity", 1) .attr("fill", d => this.getCircleFill(circleRadius, d)) + .attr("fill-opacity", d => this.getCircleFillOpacity()) .attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value)); // Remove dots that are no longer needed @@ -184,7 +200,7 @@ export class ScatterChart extends BaseAxisChart { reduceOpacity(exception) { const circleRadius = this.getCircleRadius(); - select(exception).attr("fill-opacity", false); + select(exception).attr("fill-opacity", this.getCircleFillOpacity()); select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity); select(exception).attr("fill", (d: any) => this.getCircleFill(circleRadius, d)); } diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 5efecb90a3..3af7f53b94 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -57,7 +57,7 @@ div.chart-holder { circle { &.dot { - stroke-width: 2; + stroke-width: 1.5; } } } From d016a3e757bfd6e56c589f8c46563100851051d1 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 30 Apr 2019 00:26:21 -0400 Subject: [PATCH 10/16] Fix lint issues --- packages/core/src/scatter-chart.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/scatter-chart.ts b/packages/core/src/scatter-chart.ts index dd587d9bd1..6d90eddae6 100644 --- a/packages/core/src/scatter-chart.ts +++ b/packages/core/src/scatter-chart.ts @@ -81,7 +81,7 @@ export class ScatterChart extends BaseAxisChart { getCircleFillOpacity() { // If the chart is only a scatter chart // And not a line chart for instance - if (this.constructor === ScatterChart){ + if (this.constructor === ScatterChart) { return Configuration.options.SCATTER.points.fillOpacity; } From 71470eaea9837f460d9c46f98f43915506f3dc43 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Fri, 3 May 2019 16:20:54 -0400 Subject: [PATCH 11/16] Update main palette --- packages/core/demo/demo-data/colors.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index 6f72453e43..9ac0623720 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -10,8 +10,8 @@ let themeToUse = [ colorsService.teal(30), colorsService.magenta(50), colorsService.cyan(40), - colorsService.magenta(60), - colorsService.purple(30), + colorsService.magenta(80), + colorsService.purple(80), colorsService.cyan(80) ] From 26066b4d452846d84560f7a9add10e8a3436fe84 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 7 May 2019 15:12:59 -0400 Subject: [PATCH 12/16] Fix main theme --- packages/core/demo/demo-data/colors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index 9ac0623720..c43bf5aee4 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -11,7 +11,7 @@ let themeToUse = [ colorsService.magenta(50), colorsService.cyan(40), colorsService.magenta(80), - colorsService.purple(80), + colorsService.purple(30), colorsService.cyan(80) ] From e41f3f69f051d4b27f5dde5c41cd2572a64d38c4 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 7 May 2019 15:25:57 -0400 Subject: [PATCH 13/16] Add new light themes --- packages/core/demo/demo-data/colors.ts | 14 +++--------- packages/core/src/services/themes.ts | 30 ++++++++++++++++++++++++++ 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index c43bf5aee4..d1ad8bfea2 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -5,22 +5,14 @@ import { const urlParams = new URLSearchParams(window.location.search); const theme = parseInt(urlParams.get('theme')); -let themeToUse = [ - colorsService.purple(60), - colorsService.teal(30), - colorsService.magenta(50), - colorsService.cyan(40), - colorsService.magenta(80), - colorsService.purple(30), - colorsService.cyan(80) -] +let themeToUse = themes.LIGHT_1; switch(theme) { case 2: - themeToUse = themes.HC_1; + themeToUse = themes.LIGHT_2; break; case 3: - themeToUse = themes.HC_2; + themeToUse = themes.LIGHT_3; break; case 4: themeToUse = themes.HC_3; diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts index 698720f0b3..40a50d89f3 100644 --- a/packages/core/src/services/themes.ts +++ b/packages/core/src/services/themes.ts @@ -20,6 +20,36 @@ const generateTheme = (firstShade, secondShade) => { return firstPalette.concat(secondPalette); }; +export const LIGHT_1 = [ + colors.purple(60), + colors.teal(30), + colors.magenta(50), + colors.cyan(40), + colors.magenta(80), + colors.purple(30), + colors.cyan(80) +]; + +export const LIGHT_2 = [ + colors.purple(60), + colors.magenta(30), + colors.teal(80), + colors.cyan(40), + colors.magenta(70), + colors.teal(30), + colors.cyan(70) +]; + +export const LIGHT_3 = [ + colors.purple(60), + colors.magenta(30), + colors.teal(70), + colors.cyan(40), + colors.magenta(70), + colors.teal(30), + colors.cyan(70) +]; + export const HC_1 = generateTheme(80, 50); export const HC_2 = generateTheme(70, 40); export const HC_3 = generateTheme(60, 40); From c32b6da51a1f415325359d121b12cee90502fd29 Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 7 May 2019 15:51:09 -0400 Subject: [PATCH 14/16] Use @carbon/elements, and add a dark theme --- packages/core/demo/demo-data/colors.ts | 9 ++-- packages/core/package.json | 1 + packages/core/src/services/colors.ts | 57 +++++++------------------- packages/core/src/services/themes.ts | 10 +++++ 4 files changed, 28 insertions(+), 49 deletions(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index d1ad8bfea2..b3286c6e58 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -7,7 +7,7 @@ const urlParams = new URLSearchParams(window.location.search); const theme = parseInt(urlParams.get('theme')); let themeToUse = themes.LIGHT_1; -switch(theme) { +switch (theme) { case 2: themeToUse = themes.LIGHT_2; break; @@ -15,15 +15,12 @@ switch(theme) { themeToUse = themes.LIGHT_3; break; case 4: - themeToUse = themes.HC_3; - break; - case 5: - themeToUse = themes.HC_4; + themeToUse = themes.DARK_1; break; } export const colors = window["isExperimental"] ? - themeToUse: + themeToUse : [ "#00a68f", "#3b1a40", diff --git a/packages/core/package.json b/packages/core/package.json index 18ff637155..eebb366808 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -23,6 +23,7 @@ "author": "IBM", "license": "Apache-2.0", "dependencies": { + "@carbon/colors": "10.1.1", "@carbon/utils-position": "1.1.0", "babel-polyfill": "6.26.0", "d3": "4.13.0", diff --git a/packages/core/src/services/colors.ts b/packages/core/src/services/colors.ts index 3a49f740d7..6c33db023b 100644 --- a/packages/core/src/services/colors.ts +++ b/packages/core/src/services/colors.ts @@ -1,48 +1,19 @@ -const purplePalette = { - 30: "#d0b0ff", - 40: "#bb8eff", - 50: "#a970ff", - 60: "#8a3ffc", - 70: "#6e32c9", - 80: "#4f2196", - 90: "#38146b" -}; - -const magentaPalette = { - 30: "#ffa0c2", - 40: "#fa75a6", - 50: "#ee538b", - 60: "#d12765", - 70: "#a11950", - 80: "#760a3a", - 90: "#57002b" -}; - -const cyanPalette = { - 30: "#6ccaff", - 40: "#30b0ff", - 50: "#1193e8", - 60: "#0072c3", - 70: "#0058a1", - 80: "#003d73", - 90: "#002b50" -}; - -const tealPalette = { - 30: "#20d5d2", - 40: "#00bab6", - 50: "#009e9a", - 60: "#007d79", - 70: "#006161", - 80: "#004548", - 90: "#003137" -}; +import { + cyan, + green, + magenta, + purple, + red, + teal +} from "@carbon/colors"; const getColor = (obj, shade) => obj[shade]; export default { - purple: shade => getColor(purplePalette, shade), - magenta: shade => getColor(magentaPalette, shade), - cyan: shade => getColor(cyanPalette, shade), - teal: shade => getColor(tealPalette, shade) + cyan: shade => getColor(cyan, shade), + green: shade => getColor(green, shade), + magenta: shade => getColor(magenta, shade), + purple: shade => getColor(purple, shade), + red: shade => getColor(red, shade), + teal: shade => getColor(teal, shade) }; diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts index 40a50d89f3..41960f339b 100644 --- a/packages/core/src/services/themes.ts +++ b/packages/core/src/services/themes.ts @@ -50,6 +50,16 @@ export const LIGHT_3 = [ colors.cyan(70) ]; +export const DARK_1 = [ + colors.purple(60), + colors.teal(30), + colors.magenta(50), + colors.green(40), + colors.purple(20), + colors.teal(60), + colors.magenta(30) +]; + export const HC_1 = generateTheme(80, 50); export const HC_2 = generateTheme(70, 40); export const HC_3 = generateTheme(60, 40); From aee454a8939b09aba4f03e959900f55efe3bb02a Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Tue, 7 May 2019 21:02:32 -0400 Subject: [PATCH 15/16] Replace with default colors, and add theme selector --- packages/core/demo/demo-data/colors.ts | 30 +----- packages/core/demo/index.html | 92 +++++++++++------ packages/core/demo/index.scss | 5 +- packages/core/demo/index.ts | 137 ++----------------------- packages/core/src/configuration.ts | 9 +- packages/core/src/services/themes.ts | 37 +------ 6 files changed, 76 insertions(+), 234 deletions(-) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index b3286c6e58..ded0a2c975 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -1,30 +1,8 @@ -import { - colors as colorsService, - themes -} from "../../src/index" +import { themes, defaultColors } from "../../src/index"; const urlParams = new URLSearchParams(window.location.search); -const theme = parseInt(urlParams.get('theme')); -let themeToUse = themes.LIGHT_1; -switch (theme) { - case 2: - themeToUse = themes.LIGHT_2; - break; - case 3: - themeToUse = themes.LIGHT_3; - break; - case 4: - themeToUse = themes.DARK_1; - break; -} +// Grab "theme" param from query string +let themeToUse = urlParams.has("theme") ? themes[urlParams.get("theme")] : defaultColors; -export const colors = window["isExperimental"] ? - themeToUse : - [ - "#00a68f", - "#3b1a40", - "#473793", - "#3c6df0", - "#56D2BB" - ]; +export const colors = themeToUse; diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index fd97bb50c5..9a16f274e1 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -34,31 +34,37 @@

Carbon Charts

A reusable framework-agnostic D3 charting library.

- + Repository - + Docs - - + + - + + l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z" /> Angular - + - + @@ -66,10 +72,14 @@

A reusable framework-agnostic D3 charting library.

React - - - - + + + + + Vue @@ -78,21 +88,36 @@

A reusable framework-agnostic D3 charting library.

-
-
- - Experimental Mode - - -
- - +
+
+
+ +
-
+
@@ -150,7 +175,8 @@

A reusable framework-agnostic D3 charting library.

-
+
@@ -183,7 +209,8 @@

A reusable framework-agnostic D3 charting library.

-
+
@@ -233,12 +260,13 @@

A reusable framework-agnostic D3 charting library.

Update Data -
- + - + \ No newline at end of file diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss index 22098979ae..56a3cf9893 100644 --- a/packages/core/demo/index.scss +++ b/packages/core/demo/index.scss @@ -157,14 +157,13 @@ header.m-demo-header { } } -div.experimental-switch { +div.options { display: table; width: 100%; max-width: 800px; margin: auto; margin-bottom: 30px; padding: 30px; - padding-bottom: 0; background-color: #fff; - box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1); + box-shadow: 0 15px 34px -11px rgba(22, 56, 107, 0.1); } diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts index 32f3357967..5420460d33 100644 --- a/packages/core/demo/index.ts +++ b/packages/core/demo/index.ts @@ -14,136 +14,13 @@ import "./../src/style.scss"; // Interfaces import { ChartData } from "./../src/configuration"; -// -// Experimental Switch Toggle -// -const experimentalSwitchWrapper = document.querySelector("fieldset.experimental-switch"); -const experimentalCheckbox = (experimentalSwitchWrapper.querySelector("input#toggleInput") as HTMLInputElement); -const { location } = window; - -if (location) { - const urlParams = new URLSearchParams(window.location.search); - window["isExperimental"] = urlParams.get('experimental'); - experimentalCheckbox.checked = window["isExperimental"]; - - experimentalSwitchWrapper.querySelector("label.bx--toggle__label").addEventListener("click", () => { - // Need the setTimeout - // Here since carbon toggle - // Does not provide a callback - // Therefore we wait until the change in toggle - // Status takes effect - setTimeout(() => { - const experimentalMode = experimentalCheckbox.checked; - - // It's not necessary to process the location pathname - // Since we're using the location origin - // And since we don't use any other query params - location.href = `${location.origin}${location.pathname}?experimental=${experimentalMode}`; - }); - }); -} else { - // Hide experimental switch altogether - experimentalSwitchWrapper.parentNode.removeChild(experimentalSwitchWrapper); -} - - -const { - // Bar - groupedBarOptions, - groupedBarData, - simpleBarOptions, - simpleBarData, - stackedBarData, - stackedBarOptions, - // Pie & donut - pieOptions, - pieData, - donutOptions, - // Line - curvedLineOptions, - curvedLineData, - lineData, - lineOptions, - scatterData, - // Combo - comboData, - comboOptions -} = require("./demo-data/index"); - -const chartTypes = [ - { - id: "grouped-bar", - name: "Grouped Bar", - options: groupedBarOptions, - data: groupedBarData - }, - { - id: "simple-bar", - name: "Bar", - options: simpleBarOptions, - data: simpleBarData - }, - { - id: "combo", - name: "Combo", - options: comboOptions, - data: comboData - }, - { - id: "stacked-bar", - name: "Bar", - options: stackedBarOptions, - data: stackedBarData - }, - { - id: "simple-bar-accessible", - name: "Accessible Bar", - options: Object.assign({}, simpleBarOptions, {accessibility: true}), - data: simpleBarData - }, - { - id: "stacked-bar-accessible", - name: "Bar", - options: Object.assign({}, stackedBarOptions, {accessibility: true}), - data: stackedBarData - }, - { - id: "curved-line", - name: "Curved Line", - options: curvedLineOptions, - data: curvedLineData - }, - { - id: "line", - name: "Line", - options: lineOptions, - data: lineData - }, - { - id: "line-step", - name: "Step", - options: Object.assign({}, lineOptions, {curve: "curveStepAfter"}), - data: lineData - }, - { - id: "pie", - name: "pie", - options: pieOptions, - data: pieData - }, - { - id: "donut", - name: "donut", - options: donutOptions, - data: pieData - }, - { - id: "scatter", - name: "scatter", - options: lineOptions, - data: scatterData - } -]; +// Functionality for demo options toolbar +import { initializeDemoOptions } from "./demo-options"; + +// Chart types +import { chartTypes } from "./chart-types"; + +initializeDemoOptions(); const classyCharts = {}; diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index aeba87caf6..bed872b084 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -1,5 +1,6 @@ import { ScaleBand, ScaleLinear } from "d3-scale"; import { Tools } from "./tools"; +import * as themes from "./services/themes"; /* ********************** @@ -138,13 +139,7 @@ export interface BaseChartOptions { const baseOptions: BaseChartOptions = { legendClickable: true, containerResizable: true, - colors: [ - "#00a68f", - "#3b1a40", - "#473793", - "#3c6df0", - "#56D2BB" - ], + colors: themes.LIGHT_1, tooltip: { size: TooltipSize.FULL, formatter: null, diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/themes.ts index 41960f339b..fca54824d2 100644 --- a/packages/core/src/services/themes.ts +++ b/packages/core/src/services/themes.ts @@ -1,25 +1,5 @@ import colors from "./colors"; -// Generates array of color values -// For all available colors within the shades provided -const generateTheme = (firstShade, secondShade) => { - const firstPalette = []; - const secondPalette = []; - - const colorKeys = Object.keys(colors); - for (let i = 0; i < 2; i++) { - colorKeys.forEach((colorKey, j) => { - const shadeToUse = (i + j) % 2 === 0 ? secondShade : firstShade; - console.log("shadeToUse", colorKey, shadeToUse); - firstPalette.push( - colors[colorKey](shadeToUse) - ); - }); - } - - return firstPalette.concat(secondPalette); -}; - export const LIGHT_1 = [ colors.purple(60), colors.teal(30), @@ -31,23 +11,13 @@ export const LIGHT_1 = [ ]; export const LIGHT_2 = [ - colors.purple(60), - colors.magenta(30), - colors.teal(80), - colors.cyan(40), - colors.magenta(70), - colors.teal(30), - colors.cyan(70) -]; - -export const LIGHT_3 = [ colors.purple(60), colors.magenta(30), colors.teal(70), colors.cyan(40), colors.magenta(70), colors.teal(30), - colors.cyan(70) + colors.cyan(80) ]; export const DARK_1 = [ @@ -59,8 +29,3 @@ export const DARK_1 = [ colors.teal(60), colors.magenta(30) ]; - -export const HC_1 = generateTheme(80, 50); -export const HC_2 = generateTheme(70, 40); -export const HC_3 = generateTheme(60, 40); -export const HC_4 = generateTheme(80, 40); From 9f6fde8565c640bfe40aeaf5310fb340659535dc Mon Sep 17 00:00:00 2001 From: Eliad Moosavi Date: Thu, 9 May 2019 02:55:11 -0400 Subject: [PATCH 16/16] feat(Color palettes and design updates): --- packages/core/demo/demo-data/colors.ts | 7 +++++-- packages/core/demo/index.html | 2 +- packages/core/src/configuration.ts | 4 ++-- packages/core/src/index.ts | 11 ++++------- .../core/src/services/{themes.ts => colorPalettes.ts} | 2 ++ 5 files changed, 14 insertions(+), 12 deletions(-) rename packages/core/src/services/{themes.ts => colorPalettes.ts} (94%) diff --git a/packages/core/demo/demo-data/colors.ts b/packages/core/demo/demo-data/colors.ts index ded0a2c975..701d3d0811 100644 --- a/packages/core/demo/demo-data/colors.ts +++ b/packages/core/demo/demo-data/colors.ts @@ -1,8 +1,11 @@ -import { themes, defaultColors } from "../../src/index"; +import { colorPalettes } from "../../src/index"; const urlParams = new URLSearchParams(window.location.search); // Grab "theme" param from query string -let themeToUse = urlParams.has("theme") ? themes[urlParams.get("theme")] : defaultColors; +let themeToUse = colorPalettes.DEFAULT; +if (urlParams.has("theme") && colorPalettes[urlParams.get("theme")]) { + themeToUse = colorPalettes[urlParams.get("theme")]; +} export const colors = themeToUse; diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index 9a16f274e1..b6953015e3 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -104,7 +104,7 @@

A reusable framework-agnostic D3 charting library.

    • -
    • +
    • Light UI - Primary
    • diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts index bed872b084..9522fa4f9f 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -1,6 +1,6 @@ import { ScaleBand, ScaleLinear } from "d3-scale"; import { Tools } from "./tools"; -import * as themes from "./services/themes"; +import * as colorPalettes from "./services/colorPalettes"; /* ********************** @@ -139,7 +139,7 @@ export interface BaseChartOptions { const baseOptions: BaseChartOptions = { legendClickable: true, containerResizable: true, - colors: themes.LIGHT_1, + colors: colorPalettes.DEFAULT, tooltip: { size: TooltipSize.FULL, formatter: null, diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index d422ee0105..4ad24aa9ba 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -10,16 +10,13 @@ import { LineChart } from "./line-chart"; import { ComboChart } from "./combo-chart"; import { ScatterChart } from "./scatter-chart"; -import colors from "./services/colors"; -import * as Configuration from "./configuration"; -const defaultColors = Configuration.options.BASE.colors; - -import * as themes from "./services/themes"; +import * as colorPalettes from "./services/colorPalettes"; +// TODO 1.0 - Remove deprecated API +const defaultColors = colorPalettes.DEFAULT; export { - colors, defaultColors, - themes, + colorPalettes, BaseChart, BaseAxisChart, PieChart, diff --git a/packages/core/src/services/themes.ts b/packages/core/src/services/colorPalettes.ts similarity index 94% rename from packages/core/src/services/themes.ts rename to packages/core/src/services/colorPalettes.ts index fca54824d2..da3e570cf6 100644 --- a/packages/core/src/services/themes.ts +++ b/packages/core/src/services/colorPalettes.ts @@ -29,3 +29,5 @@ export const DARK_1 = [ colors.teal(60), colors.magenta(30) ]; + +export const DEFAULT = LIGHT_1;