adjust the bar width to prevent bars from overlapping (carbon-design-…

…system#711)

* adjust the bar width to prevent bars from overlapping

* adjust the bar width to prevent bars from overlapping

* add demo

* revise based on code review

* revise based on code review

* revise based on code review

* adjust the bar width to prevent bars from overlapping

* adjust the bar width to prevent bars from overlapping

* add demo

* revise based on code review

* fix: fix missing title option in charts interface

* v0.32.1

* fix(core, angular, react, vue, svelte): fix scatter graph data updates (carbon-design-system#654)

* Merge pull request carbon-design-system#656 from theiliad/update-demo-data

* chore(core, react, angular, vue, svelte): update demo data

* update angular storybook demos

* Update packages/core/demo/data/index.ts

Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* Update packages/core/demo/data/index.ts

Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* v0.32.2

* chore(core, react, angular, vue, svelte): fix codesandbox examples

* v0.32.3

* Update README.md

* Update index.ts

* fix: update tslint and prettier options (carbon-design-system#661)

- add packages/core/.prettierrc
- add packages/vue/.prettierignore
- update packages/core/.prettierignore
- update packages/core/tslint.json

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.4

* Merge pull request carbon-design-system#549 from accurat/area-chart

* add area chart component - basic

* feat(core): Axes configuration options defaultable, Add option to not include 0 on axes

* add area chart component - basic

* Merge pull request carbon-design-system#464 from accurat/storybook-in-core

* Storybook in core: Configuration almost done

* Storybook in core: Add examples (WIP)

* Storybook in core: Fix styles.scss require

* Storybook in core: Rename variables

* Storybook in core: Filter the list of { options, data } cases from the demo ones adding an isDemoExample boolean: only those will be visible in the demo page, the rest will only be visible in the storybooks

* add vanilla codesandbox

* Storybook in core: Minor changes

* fix vanilla sandbox issue

* remove core internal demo site

* globalize all demo styling within core

* fix core story file path

* add one page demo story

* addition of themes to the core storybook

* fix storybook build

* remove unnecessary import from storybooks

* downgrade sass version

* fix tests

* add correct NODE_ENV var in the netlify script

* fix tests on Travis

* fix tests

* add correct classname to wrapper storybooks

* add welcome story

* update storybook default theme

Co-authored-by: Cal Smith <1744185+cal-smith@users.noreply.github.com>
Co-authored-by: carbon-bot <carbon@us.ibm.com>
Co-authored-by: Cal Smith <calsmith@protonmail.com>
Co-authored-by: Adam Rybinski <adam@rybinski.info>
Co-authored-by: cesare.soldini <cesare.soldini@accurat.it>
Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>

* fix merge upstream

* Fix area options merge

* basic stacked area chart

* remove spacing

* add legend item hover

* refactor

* add event listeners

* hide tooltip for now, clean up not used imports

* fix rebase

* add mix-blend-mode

* rename area > stacked-area

* Fix area-stacked scss

* remove stroke

* fix rebase, use model.getStackedData

* fix spaceOnEdges

* update area data to tabular format

* fix legend highlighting

* add area stacked percentage

* add lines to stacked area chart

* add ruler and tooltip

* add wrappers for stacked area chart

* hide lines when filtering is active

* feat(core, react, vue, angular): add stacked area chart

* format code

* fix react wrapper for stacked area

* fix import for svelte stacked area

* add fade-in flag in scatter graph

* format

* format

Co-authored-by: Serena Girardi <serena.girardi@accurat.it>
Co-authored-by: Ilaria Venturini <ilaria.venturini@accurat.it>
Co-authored-by: Cal Smith <1744185+cal-smith@users.noreply.github.com>
Co-authored-by: carbon-bot <carbon@us.ibm.com>
Co-authored-by: Cal Smith <calsmith@protonmail.com>
Co-authored-by: Adam Rybinski <adam@rybinski.info>
Co-authored-by: cesare.soldini <cesare.soldini@accurat.it>
Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.5

* Update README.md

* Update README.md

* Update README.md

* Update README.md

* Merge pull request carbon-design-system#652 from navjeets/master

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* fix(scatter): multi-tooltip doesn't show on hover over data points

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* Changelog

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* Update scatter.ts

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* Update scatter.ts

* fix(scatter): multi-tooltip doesn't show on hover over data points

carbon-design-system#650

* Update scatter.ts

* resolved conflicts with master

Co-authored-by: NAVJEET SANDHU <nsandhu@us.ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.6

* Fix charts render data outside custom domain (carbon-design-system#666)

* fix: remove data outside custom domain

* fix: fix ticks on charts for custom domain

* refactor: add demo for custom domain

* refactor: create custom domain demos

Co-authored-by: Fei <fei-fei.zheng@ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update line.ts

* Merge pull request carbon-design-system#669 from carmiele/issue-668-missing-timescale-option

Co-authored-by: Carmen Tan <carmentan@ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.7

* Merge pull request carbon-design-system#672 from sophiiae/fixAreaPercentage

* fix: fix AreaPercentageChart domain issue

* style: remove unused imports

* fix: replace mapsTo with ScaleType

* fix: check mapsTo in the axesOptions

* style: format the code

* style(n): refactor code

* fix: remove Tools.clone for copying demo data and options

* style: format code

* fix: fix extra space error on stacked area percentage chart

* improvement: add percentage option in AxisOptions

Add percentage as a flag under AxisOptions for percentage chart with default [0, 100] axis domain.
Add missing stacked option in AxisOptions interface.

* style: update comments

* style: update comments

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* v0.32.8

* remove duplicated demos

* Merge pull request carbon-design-system#623 from natashadecoste/guage

* created gauge chart - squashed

* added to react

* added to all packages

* resized gauge, corrected colors

* fixed tooltip

* two stories for gauge: circular and semicircular

* hidden legend

* changed perc symbol size and position, also gauge size

* distance between numbers

* last fix for text size

* carets with svgs

* fixed pixel and dominant baseline for firefox

* centers caret for firefox

* fixed caret size and position

* adapts number size with changing of the size of the chart itself

* better handling of higher arcRatios

* Remove arcRatio, add gauge "type"

* Fix sizing and centering of gauge chart

* Fix option typings for Gauge chart

* Reorganize all sizing and positioning calculations, Simplify data format

* Make Gauge colors customizable from options

* Gauge: Optical centering of the center number for the presence of the % small symbol

* Gauge: Add configuration option for arrow color

* Gauge type is now defaulted in configuration.ts

* Fixed data format, removed tooltip service

* Gauge: Clamp the arc at 100%

* Revert "Update CHANGELOG.md"

This reverts commit cce62aa.

* remove changelog diff

* update guage

* formatting

* review changes

* add status, arrow direction, theme & remove spacer

* fix guage to work without delta

* add enter/merge/exit for value and delta

* Update packages/core/src/components/graphs/gauge.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update packages/core/src/configuration.ts

Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* review changes

* Update packages/core/src/components/graphs/gauge.ts

Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* review comments + prettier

* review changes

* update config names

* feat(gauge chart): add gauge chart to carbon-charts

re carbon-design-system#554

* review changes

Co-authored-by: Luca Mattiazzi <l.d.mattiazzi@gmail.com>
Co-authored-by: cesare.soldini <cesare.soldini@accurat.it>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* v0.32.9

* fix(core): fix gauge charts without a delta number (carbon-design-system#680)

* Merge pull request carbon-design-system#646 from linhenry0417/truncate-label

* truncate label if too long to avoid graph display issue

* truncate label if too long to avoid graph display issue

* truncate label if too long to avoid graph display issue

* truncate label if too long to avoid graph display issue

* refactor

* add demo

* add demo for long label

* change variables naming

* code refactor

* add truncation function to options

* add truncation function to tools

* code refactor

* fix demo data

* refactor based on code review

* refactor based on code review

* refactor based on code review

* refactor based on code review

* refactor based on code review

* add line chart demo

* fix truncation interface

* add scatter demo for long label truncation

* fix legend text alignment and default config loading

* add legend truncation config in demo option

* fix filter label display issue

* code refactor

* code refactor

* code refactor

* code refactor

* remove unnecessary import in tooltip-bar.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.10

* Update README.md

* Fix stacked area chart with uneven data (carbon-design-system#681)

* fix: fix stacked area chart with uneven data

sort stackKeys

* style: remove console.log

* improvement: add demo for uneven data and revise code

* Update packages/core/src/model.ts

Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* style: add semicolons and revert code

Co-authored-by: Fei <fei-fei.zheng@ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>

* Merge pull request carbon-design-system#682 from natashadecoste/gauge-tooltip

tooltip is needed for title truncation

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.32.11

* Merge pull request carbon-design-system#678 from natashadecoste/area-chart-stroke

* fix(core): stroke dissappears when remapping the dimensions

* fix mapping custom domain and range identifiers

* fix for group remapping

* v0.32.12

* Update README.md

* feat(svelte): add Gauge chart wrapper (carbon-design-system#686)

* chore(angular): add angular 9 dependency versions to peerDependencies (carbon-design-system#690)

* Respect addSpaceOnEdges when initializing axes (carbon-design-system#688)

* fix(core): respect addSpaceOnEdges when initializing axes

* format

* PR changes

* format

* Merge pull request carbon-design-system#639 from sophiiae/selectedGroups

* Add selectedGroups option

* Bind selectedGroups with legend and dataGroups

* improvement: move selectedGroup under data option

re carbon-design-system#610

* refactor: update selectedGroup position

* improvement: grab options from getOptions

* improvement: fix naming and update comments

* improvement: simplify the code

* improvement: remove updateSelectedGroups

* fix: remove updateSelectedGroups from legend

* test: add unit test for setting up selectedGroups

* test: modify unit test

* test: renaming

* test: revise unit test

* test: update test description

* style: revise the comment for selectedGroup

* test: update test

* test: simplify the test code

* style: format the code

* test: add more tests

* test: remove tests for events

* test: remove async function

* fix: fix check mark position issue and add demos

* fix: fix multiple check marks bug

* fix: fix chart shrinks between legend click for selected groups

* fix: fix legend height change with first legend click

* fix: fix demo broken

* refactor: renaming

* refactor: get legend height

* remove semicolon

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* fix: fix data domain

* refactor: rename the demo

* fix: fix angular and react height issue

Co-authored-by: Fei <fei-fei.zheng@ibm.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.33.0

* fix: fix bar chart tooltip data (carbon-design-system#692)

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* Merge pull request carbon-design-system#694 from sophiiae/remove-primary-secondary

* refactor: remove primary and secondary option from demo

* style: remove commas

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* v0.33.1

* fix:(core): Scatter points fix (carbon-design-system#703)

* chore(angular): add angular 9 dependency versions to peerDependencies

* fix(core): fix scatter points color and opacity

fix carbon-design-system#469

* fix theming for scatter points

Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>

* improvement(skeleton): honour loading config to show skeleton chart (carbon-design-system#691)

* improvement(skeleton): honour loading config to show skeleton chart even when data is passed in

fix carbon-design-system#677

* Update packages/core/src/components/axes/axis.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* fix: add role fallback value for legend (carbon-design-system#702)

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* feat(core): add title element to main SVG (carbon-design-system#704)

* feat(core, angular, vue, react, svelte): add title element to main SVG

* format

* Merge pull request carbon-design-system#695 from theiliad/tooltip-redesign

* single tooltip enhancement

* remove old toolips from axis chart types

* add tooltips for all chart types

* add total value to tooltips

* add ruler to stacked bar charts

* feat(core, angular, vue, react, svelte): tooltip redesign

* upgrade axis truncated label tooltips to the new style

* fix stacked bar tooltip order

* format

* v0.34.0

* fix(core, react, angular, vue, svelte): render both vertical and horizontal thresholds (carbon-design-system#706)

* Merge pull request carbon-design-system#705 from theiliad/angular-zone-js-vupdate

* v0.34.1

* Fix hidden axes for charts (carbon-design-system#701)

* fix: fix render skeleton for charts

* fix: update condition for skeleton

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* Merge pull request carbon-design-system#707 from sophiiae/wai-aria-label

* improvement: improve accessibility with aria-labels

* style: remove extra line

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* v0.34.2

* revise based on code review

* Merge pull request carbon-design-system#425 from natashadecoste/meter-chart

* meter chart and graph

* add support for percentage value in title

* change data on demo

* fix demo update data

* add status indicator

* transition bar

* update the chart holder for meter

* add tooltip in to support title truncation

* fix the title truncation tooltip & demo container

* fix title truncation stack overflow on meter title

* update the status indicator width calc

* border style

* update to allow meter to add a default chart title

* add check for peak within domain

* Update packages/core/demo/index.ts

Co-Authored-By: Eliad Moosavi <theiliad@users.noreply.github.com>

* review changes

* remove duplicate

* update demo

* fix legend enabled option to affect legend spacer

* fix meter options

* fix demo height

* remove console log

* fix lint err

* separate options out from data

* merge with new changes

* update meter status indicator

* fix meter title

* add vue wrapper

* add angular wrappers

* react wrappers

* add demo example

* update to the peak functionality

* update to percentage value style

* update meter to tabular format

* bars to use status color

* add in border

* fix firefox errors

* move chart status to meter model

* update to the look of the bar and spacing

* fix title tooltip

* add in custom color

* update icons + cleanup

* update styles on meter border

* a11y

* update meter specs

* fix icons

* remove long names from demos

* fix pie tooltip

* cleanup

* fix meteroptions

* cleanup charts/axis-charts

* remove peak if there is none

* review changes

* reivew changes/demo size fix

* remove truncated tooltip for title

* fix meter title truncation

* fix chart without height taking too much space

* Update packages/core/src/components/graphs/meter.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update packages/core/src/components/graphs/meter.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* Update packages/core/src/components/graphs/meter.ts

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* review changes

* check max height

* review changes

* update config

Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>

* v0.34.3

* Custom tick values (carbon-design-system#713)

* chore(angular): add angular 9 dependency versions to peerDependencies

* improvement(core): add functionality for custom tick values being passed in

fix carbon-design-system#540

* add time series demo

* fix label scale

* update demo

* review changes

Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>
Co-authored-by: Fei Z <feifeizheng@outlook.com>

* Merge pull request carbon-design-system#710 from sophiiae/pie-align-center

* improvement: align center flag for non-axis charts and legend

* style: formatting the code

* fix: fix centering offset for pie

* improvement: use enum for chart and legend alignment

add enum, set default alignment, add center and right alignment for non-axis charts and legend

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* v0.34.4

* fix: fix pie chart alignment (carbon-design-system#716)

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* Remove space on edge on custom domain (carbon-design-system#715)

* fix: remove space on edge on custom domain

* fix: keep labels on the edges for custom domain

Co-authored-by: Fei <fei-fei.zheng@ibm.com>

* Merge pull request carbon-design-system#709 from theiliad/fix-stacked-bar-tooltip-lag

* fix(core, angular, vue, react, svelte): debounce ruler renders when more than 100 datapoints

* format

Co-authored-by: Fei Z <feifeizheng@outlook.com>

* v0.34.5

* revise based on code review

* revise based on code review

* revise based on code review

Co-authored-by: Fei Z <feifeizheng@outlook.com>
Co-authored-by: Eliad Moosavi <theiliad@users.noreply.github.com>
Co-authored-by: Fei <fei-fei.zheng@ibm.com>
Co-authored-by: carbon-bot <carbon@us.ibm.com>
Co-authored-by: Donisius Wigie <45505172+Donisius@users.noreply.github.com>
Co-authored-by: Eliad Moosavi <iliadmoosavi@gmail.com>
Co-authored-by: Eric Yang <59426533+hlyang397@users.noreply.github.com>
Co-authored-by: Luca Falasco <falasco.luca@gmail.com>
Co-authored-by: Serena Girardi <serena.girardi@accurat.it>
Co-authored-by: Ilaria Venturini <ilaria.venturini@accurat.it>
Co-authored-by: Cal Smith <1744185+cal-smith@users.noreply.github.com>
Co-authored-by: Cal Smith <calsmith@protonmail.com>
Co-authored-by: Adam Rybinski <adam@rybinski.info>
Co-authored-by: cesare.soldini <cesare.soldini@accurat.it>
Co-authored-by: Navjeet Sandhu <navjeet.sandy@gmail.com>
Co-authored-by: NAVJEET SANDHU <nsandhu@us.ibm.com>
Co-authored-by: Carmen Tan <carmiele@users.noreply.github.com>
Co-authored-by: Carmen Tan <carmentan@ibm.com>
Co-authored-by: natashadecoste <natasha.decoste@gmail.com>
Co-authored-by: Luca Mattiazzi <l.d.mattiazzi@gmail.com>
Co-authored-by: Eric Liu <ericyl.us@gmail.com>

packages/core/demo/data/bar.ts

@@ -260,6 +260,26 @@ export const simpleBarTimeSeriesData = [
 	{ group: "Misc", date: new Date(2019, 0, 7), value: 51213 }
 ];
 
+export const simpleBarTimeSeriesDenseData = [
+	{ group: "data", date: new Date(2019, 1, 1, 10, 10, 0), value: 10000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 12, 4), value: 20001 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 14, 8), value: 10002 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 15, 8), value: 10062 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 17, 12), value: 30003 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 18, 16), value: 20004 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 19, 20), value: 10005 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 22, 24), value: 50006 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 24, 24), value: 20006 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 26, 28), value: 40007 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 27, 32), value: 30008 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 30, 36), value: 10000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 32, 36), value: 10000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 35, 40), value: 20000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 36, 44), value: 10000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 37, 48), value: 30000 },
+	{ group: "data", date: new Date(2019, 1, 1, 10, 40, 52), value: 10000 },
+];
+
 export const simpleBarTimeSeriesOptions = {
 	title: "Simple bar (time series - Turkish)",
 	axes: {
@@ -288,6 +308,22 @@ export const simpleHorizontalBarTimeSeriesOptions = {
 	}
 };
 
+// Vertical simple time series with dense data
+export const simpleBarTimeSeriesDenseOptions = {
+	title: "Simple bar (time series) with dense data",
+	axes: {
+		left: {
+			mapsTo: "value",
+		},
+		bottom: {
+			mapsTo: "date",
+			scaleType: "time",
+		},
+	},
+	timeScale: { localeObject: trLocaleObject },
+	bars: { maxWidth: 200 }
+};
+
 export const simpleHorizontalBarTimeSeriesData = simpleBarTimeSeriesData;
 
 // Stacked bar

packages/core/demo/data/index.ts

@@ -170,6 +170,12 @@ let allDemoGroups = [
 				data: barDemos.simpleBarData,
 				chartType: chartTypes.SimpleBarChart
 			},
+			{
+				options: barDemos.simpleBarTimeSeriesDenseOptions,
+				data: barDemos.simpleBarTimeSeriesDenseData,
+				chartType: chartTypes.SimpleBarChart,
+				isDemoExample: true
+			},
 			{
 				options: barDemos.simpleBarTimeSeriesOptions,
 				data: barDemos.simpleBarTimeSeriesData,

packages/core/src/components/graphs/bar.ts

@@ -1,16 +1,21 @@
 // Internal Imports
 import { Component } from "../component";
+import { DOMUtils } from "../../services";
 
 export class Bar extends Component {
 	// Gets the correct width for bars based on options & configurations
 	protected getBarWidth(allDataLabels?: string[]) {
 		const options = this.model.getOptions();
+		const numberOfDatapoints = this.model.getDisplayData().length;
 		const mainXScale = this.services.cartesianScales.getMainXScale();
+		const chartWidth = DOMUtils.getSVGElementSize(this.parent, {
+			useAttrs: true
+		}).width;
 
 		if (!mainXScale.step) {
 			return Math.min(
 				options.bars.maxWidth,
-				(5 / mainXScale.ticks().length) * options.bars.maxWidth
+				chartWidth * 0.25 / numberOfDatapoints
 			);
 		}