diff --git a/.gitignore b/.gitignore index 1e368bdf9f..68b93b76de 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,6 @@ node_modules .vscode/ .idea/ *.log -packages/react/build +packages/core/demo/bundle/ +packages/react/build/ +storybook-dist diff --git a/packages/angular/demo/assets/favicon.ico b/packages/angular/demo/assets/favicon.ico new file mode 100644 index 0000000000..952d4eb6ac Binary files /dev/null and b/packages/angular/demo/assets/favicon.ico differ diff --git a/packages/angular/demo/package.json b/packages/angular/demo/package.json index dc698d4762..868fca992c 100644 --- a/packages/angular/demo/package.json +++ b/packages/angular/demo/package.json @@ -8,7 +8,7 @@ "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", - "storybook": "start-storybook -p 9005 -c .storybook" + "storybook": "start-storybook -p 9005 -c .storybook -s ./assets" }, "private": true, "dependencies": { diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index 69295c8be5..a36f6a264a 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -7,7 +7,7 @@ - + diff --git a/packages/core/demo/index.ts b/packages/core/demo/index.ts index d0cbd29f49..d01f0d74a4 100644 --- a/packages/core/demo/index.ts +++ b/packages/core/demo/index.ts @@ -105,7 +105,14 @@ const changeDemoData = (chartType: any, oldData: any, delay?: number) => { const firstTry = Math.max(0.5 * currentVal, currentVal * Math.random() * (Math.random() * 5)); const result = currentVal > 0 ? Math.min(2 * currentVal, firstTry) : Math.max(2 * currentVal, firstTry); - return Math.floor(result); + if (Math.random() > 0.5 + || chartType.indexOf("stacked") !== -1 + || chartType.indexOf("pie") !== -1 + || chartType.indexOf("donut") !== -1) { + return Math.floor(result); + } else { + return Math.floor(result) * -1; + } }; switch (chartType) { diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts index d1732e9f15..dc1e279c1d 100644 --- a/packages/core/src/base-chart.ts +++ b/packages/core/src/base-chart.ts @@ -787,7 +787,7 @@ export class BaseChart { // Draw tooltip const tooltip = d3.select(this.holder).append("div") .attr("class", "tooltip chart-tooltip") - .style("border-color", this.colorScale[d.datasetLabel](d.label)) + // .style("border-color", this.colorScale[d.datasetLabel](d.label)) .style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px"); // TODOCARBON - Remove @@ -805,7 +805,6 @@ export class BaseChart { `; } else { tooltipHTML += ` - ${d.label}
${d.datasetLabel}: ${formattedValue}
`; } diff --git a/packages/core/src/pie-chart.ts b/packages/core/src/pie-chart.ts index 0b6670da9d..fa39f1cab3 100644 --- a/packages/core/src/pie-chart.ts +++ b/packages/core/src/pie-chart.ts @@ -265,7 +265,7 @@ export class PieChart extends BaseChart { const tooltip = d3.select(this.holder).append("div") .attr("class", "tooltip chart-tooltip") .style("top", d3.mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px") - .style("border-color", this.colorScale[this.displayData.datasets[0].label](d.data.label)); // TODO - Support multiple datasets + // .style("border-color", this.colorScale[this.displayData.datasets[0].label](d.data.label)); // TODO - Support multiple datasets // TODOCARBON - Remove // Tools.addCloseBtn(tooltip, "xs") @@ -279,15 +279,16 @@ export class PieChart extends BaseChart {

${d.data.label}

`; - if (d.data.label === Configuration.pie.label.other) { - const { items } = d.data; + // TODOCARBON - Switch to popover onclick + // if (d.data.label === Configuration.pie.label.other) { + // const { items } = d.data; - items.map(item => { - tooltipHTML += ` -

${item.label}: ${item.value.toLocaleString()}

- `; - }); - } + // items.map(item => { + // tooltipHTML += ` + // ${item.label}: ${item.value.toLocaleString()}
+ // `; + // }); + // } tooltip.append("div").attr("class", "text-box").html(tooltipHTML); if (d3.mouse(this.holder as SVGSVGElement)[0] + (tooltip.node() as Element).clientWidth > this.holder.clientWidth) { diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss index 142188fa8f..a20910efd3 100644 --- a/packages/core/src/style.scss +++ b/packages/core/src/style.scss @@ -258,12 +258,14 @@ div.chart-overlay { } .tooltip { - background-color: #484848; - color: #fff; - box-shadow: 0 0 10px 0 rgba(0,0,0,0.16); + background-color: #fff; + border: 1px solid #DFE3E6; + padding: .25rem .5rem; display: block; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1); @include fonts(); font-size: 12px; + font-weight: 300; position: absolute; padding: 10px; border-radius: 3px; @@ -272,13 +274,17 @@ div.chart-overlay { z-index: 1059; p { - margin-bottom: 5px; + font-size: 12px; &.bignum { - margin-top: 15px; - font-size: 27px; + font-size: 19px; + font-weight: 600; } } + + b { + font-weight: 600; + } } #carbon-charts-patterns svg { diff --git a/packages/react/assets/favicon.ico b/packages/react/assets/favicon.ico new file mode 100644 index 0000000000..952d4eb6ac Binary files /dev/null and b/packages/react/assets/favicon.ico differ diff --git a/packages/react/package.json b/packages/react/package.json index 96d3b62be3..760b7e967f 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -7,7 +7,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack -w", "build": "webpack", - "storybook": "start-storybook -p 9006 -c .storybook" + "storybook": "start-storybook -p 9006 -c .storybook -s ./assets" }, "repository": { "type": "git", diff --git a/src/assets/demo-stacked-bar.jpg b/src/assets/demo-stacked-bar.jpg deleted file mode 100644 index 7920e459a1..0000000000 Binary files a/src/assets/demo-stacked-bar.jpg and /dev/null differ