fix(all packages): missing options, package.json and lint fixes (#1849)

* fix(all packages): missing options, package.json fixes * chore(d3): was getting bundled previously therefore not needed as peer * fix(core): jsdoc comment * chore(prettier): add blank line * docs(core/model): JSDoc * test(core): update env * chore(core/vite/type): type should be PluginOption - not Plugin * chore(vite): explicitly set this as default is changing * chore(lint): minor adjustments for lint
carbon-design-system · Jun 15, 2024 · a43f0eb · a43f0eb
1 parent 1bdbc11
commit a43f0eb
Show file tree

Hide file tree

Showing 29 changed files with 291 additions and 610 deletions.
diff --git a/packages/angular/README.md b/packages/angular/README.md
@@ -1,7 +1,7 @@
 # Carbon Charts Angular
 
 Carbon Charts Angular is a thin Angular wrapper around the vanilla JavaScript `@carbon/charts`
-component library. This prerelease is for Angular 16 and higher and uses TypeScript 5.
+component library. This prerelease is for Angular 16 and higher.
 
 If you need support for older versions of Angular (or encounter problems with this module), please
 revert to `@carbon/charts-angular@latest`. Distribution tags have been added for specific Angular
@@ -19,13 +19,13 @@ documentation is provided in the Storybook demos.
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @carbon/charts-angular@next d3 d3-cloud d3-sankey
+npm install -S @carbon/charts-angular@next
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
 
 ```bash
-yarn add @carbon/charts-angular@next d3 d3-cloud d3-sankey
+yarn add @carbon/charts-angular@next
 ```
 
 ## Step-by-step instructions

diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -56,9 +56,6 @@
 		"@types/carbon__icon-helpers": "^10.45.0",
 		"angular-eslint": "^18.0.1",
 		"concurrently": "^8.2.2",
-		"d3": "^7.9.0",
-		"d3-cloud": "^1.2.7",
-		"d3-sankey": "^0.12.3",
 		"downlevel-dts": "^0.11.0",
 		"eslint": "^9.5.0",
 		"ng-packagr": "^16.2.3",
@@ -67,7 +64,7 @@
 		"storybook": "^7.6.19",
 		"style-loader": "^4.0.0",
 		"typescript": "~5.1.6",
-		"typescript-eslint": "^8.0.0-alpha.30",
+		"typescript-eslint": "^8.0.0-0",
 		"zone.js": "~0.14.7"
 	},
 	"publishConfig": {

diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
@@ -80,6 +80,7 @@ export type {
 	RadarChartOptions,
 	ScatterChartOptions,
 	StackedAreaChartOptions,
+	StackedBarChartOptions,
 	TreeChartOptions,
 	TreemapChartOptions,
 	WordCloudChartOptions,

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -1,7 +1,6 @@
 # Carbon Charts
 
-Carbon Charts is a component library for vanilla JavaScript. Chart visualizations are based on
-D3.js, a peer dependency.
+Carbon Charts is a component library for vanilla JavaScript.
 
 The required styles should be imported from `@carbon/charts/dist/styles.css`. Additional
 documentation is provided in the Storybook demos.
@@ -11,13 +10,13 @@ documentation is provided in the Storybook demos.
 Run the following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @carbon/charts d3 d3-cloud d3-sankey
+npm install -S @carbon/charts
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
 
 ```bash
-yarn add @carbon/charts d3 d3-cloud d3-sankey
+yarn add @carbon/charts
 ```
 
 ## Step-by-step instructions

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -94,19 +94,6 @@
 		"topojson-client": "^3.1.0",
 		"tslib": "^2.6.3"
 	},
-	"peerDependencies": {
-		"d3": "^7.0.0",
-		"d3-cloud": "^1.2.5",
-		"d3-sankey": "^0.12.3"
-	},
-	"peerDependenciesMeta": {
-		"d3-cloud": {
-			"optional": true
-		},
-		"d3-sankey": {
-			"optional": true
-		}
-	},
 	"devDependencies": {
 		"@carbon/layout": "^11.22.0",
 		"@carbon/styles": "^1.59.0",

diff --git a/packages/core/src/components/axes/axis.ts b/packages/core/src/components/axes/axis.ts
@@ -250,7 +250,7 @@ export class Axis extends Component {
 		} else {
 			if (userProvidedFormatter === null) {
 				if (scaleType === ScaleTypes.LINEAR) {
-					formatter = (t: any) => numberFormatter(t, localeCode)
+					formatter = (t: number) => numberFormatter(t, localeCode)
 				}
 			} else {
 				formatter = userProvidedFormatter

diff --git a/packages/core/src/components/essentials/geo-projection.ts b/packages/core/src/components/essentials/geo-projection.ts
@@ -113,12 +113,14 @@ export class GeoProjection extends Component {
 	}
 
 	/**
-	 * @info
-	 * Depending on projection, we may need to provide additional configuration
-	 * e.g. sizing
+	 * Retrieves the D3 geographic projection based on the options provided.
 	 *
-	 * In such case, function can be refactored so that
-	 * projection should return an object with the configuraiton & function
+	 * This method selects a geographic projection from the available D3 projections
+	 * based on the `projection` property in the `thematic` options. If the projection
+	 * is not supported or is missing, an error is thrown.
+	 *
+	 * @returns {d3.GeoProjection} - The D3 geographic projection corresponding to the selected option.
+	 * @throws {Error} If the projection is not supported or is missing.
 	 */
 	getProjection() {
 		let projection = null

diff --git a/packages/core/src/components/essentials/highlights.ts b/packages/core/src/components/essentials/highlights.ts
@@ -1,5 +1,5 @@
 import { select } from 'd3'
-import Position from '@carbon/utils-position' // position service
+import { Position } from '@carbon/utils-position' // position service
 import { flipDomainAndRangeBasedOnOrientation, getProperty } from '@/tools'
 import { Component } from '@/components/component'
 import type { ChartModel } from '@/model/model'

diff --git a/packages/core/src/components/essentials/modal.ts b/packages/core/src/components/essentials/modal.ts
@@ -1,6 +1,6 @@
 import { select, type Selection } from 'd3'
 import { get } from 'lodash-es'
-import { Modal as CarbonModalComponent } from 'carbon-components' // /es/components/modal
+import { Modal as CarbonModalComponent } from 'carbon-components'
 import { getProperty } from '@/tools'
 import { carbonPrefix } from '@/configuration-non-customizable' // CSS prefix
 import { Component } from '@/components/component'

diff --git a/packages/core/src/components/essentials/threshold.ts b/packages/core/src/components/essentials/threshold.ts
@@ -1,5 +1,5 @@
 import { select, pointer, type ScaleBand } from 'd3'
-import Position, { PLACEMENTS } from '@carbon/utils-position' // position services
+import { Position, PLACEMENTS } from '@carbon/utils-position' // position services
 import { flipDomainAndRangeBasedOnOrientation, getProperty } from '@/tools'
 import { carbonPrefix } from '@/configuration-non-customizable' // CSS prefix
 import { Component } from '@/components/component'

diff --git a/packages/core/src/components/essentials/tooltip.ts b/packages/core/src/components/essentials/tooltip.ts
@@ -1,5 +1,5 @@
 import { select, pointer } from 'd3'
-import Position, { PLACEMENTS } from '@carbon/utils-position' // position service
+import { Position, PLACEMENTS } from '@carbon/utils-position' // position service
 import { getProperty, truncateLabel } from '@/tools'
 import { zoomBar as zoomBarConfigs, tooltips as tooltipConfigs } from '@/configuration'
 import { carbonPrefix } from '@/configuration-non-customizable' // CSS prefix
@@ -281,7 +281,8 @@ export class Tooltip extends Component {
 			: [PLACEMENTS.RIGHT, PLACEMENTS.LEFT, PLACEMENTS.TOP, PLACEMENTS.BOTTOM]
 
 		let bestPlacementOption: any
-		let { horizontalOffset, defaultOffset } = tooltipConfigs
+		let { horizontalOffset } = tooltipConfigs
+		const { defaultOffset } = tooltipConfigs
 
 		this.tooltip.select('div.title-tooltip').classed('title-tooltip-nowrap', noWrap)
 

diff --git a/packages/core/src/interfaces/axis-scales.ts b/packages/core/src/interfaces/axis-scales.ts
@@ -43,7 +43,7 @@ export interface BasedAxisOptions {
 	 * Override for the orientation of the title (for vertical axes).
 	 * The title string can be overrided to be rotated left or right.
 	 */
-	titleOrientation?: AxisTitleOrientations
+	titleOrientation?: AxisTitleOrientations | string
 	/**
 	 * thresholds
 	 * @example
@@ -82,9 +82,9 @@ export interface BasedAxisOptions {
 		/**
 		 * function to format the ticks
 		 */
-		formatter?: (tick: number | Date, i: number) => string
+		formatter?: ((tick: number | Date, i: number) => string) | ((tick: number | Date) => string)
 		/**
-		 * optional custom array of tick values that is within the domain of data
+		 * optional array of tick values that is within the domain of data
 		 */
 		values?: any[]
 	}

diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts
@@ -1,3 +1,4 @@
+import type { Topology } from 'topojson-specification'
 import type {
 	Alignments,
 	ArrowDirections,
@@ -570,7 +571,7 @@ export interface HeatmapChartOptions extends BaseChartOptions {
 			 * Position is determined by text length
 			 */
 			title?: string
-			type: ColorLegendType | string
+			type?: ColorLegendType | string
 		}
 	}
 }
@@ -579,7 +580,7 @@ export interface HeatmapChartOptions extends BaseChartOptions {
  * Options common to any thematic chart
  */
 export interface ThematicChartOptions extends BaseChartOptions {
-	thematic: {
+	thematic?: {
 		projection: Projection | string
 	}
 }
@@ -588,7 +589,7 @@ export interface ThematicChartOptions extends BaseChartOptions {
  * Options common to any thematic chart
  */
 export interface ChoroplethChartOptions extends ThematicChartOptions {
-	choropleth: {
+	choropleth?: {
 		/**
 		 * customize color legend
 		 * enabled by default on select charts
@@ -601,6 +602,7 @@ export interface ChoroplethChartOptions extends ThematicChartOptions {
 			title?: string
 			type: ColorLegendType | string
 		}
+		geoData: Topology
 	}
 }
 

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -1,5 +1,6 @@
 import type {
 	LayoutGrowth,
+	LegendOrientations,
 	LegendPositions,
 	Alignments,
 	ToolbarControlTypes,
@@ -134,6 +135,7 @@ export interface LegendOptions {
 	 * customized legend items
 	 */
 	additionalItems?: LegendItem[]
+	orientation?: LegendOrientations
 }
 
 /**
@@ -190,11 +192,11 @@ export interface ThresholdOptions {
 	/**
 	 * hex threshold line color
 	 */
-	fillColor: string
+	fillColor?: string
 	/**
 	 * threshold label
 	 */
-	label: string
+	label?: string
 }
 
 export interface GridOptions {

diff --git a/packages/core/src/interfaces/events.ts b/packages/core/src/interfaces/events.ts
@@ -9,6 +9,7 @@ export enum Chart {
 	// CLICK = "chart-click",
 	MOUSEOUT = 'chart-mouseout'
 }
+
 /**
  * enum of all events related to the overlay modal
  */

diff --git a/packages/core/src/interfaces/model.ts b/packages/core/src/interfaces/model.ts
@@ -1,39 +1,67 @@
 import type { AxisChartOptions } from './charts'
 
+/**
+ * Represents tabular data for a chart.
+ * Each record is an object where keys are strings and values can be of any type.
+ * @type {Record<string, any>[]}
+ */
 export type ChartTabularData = Record<string, any>[]
 
 /**
  * Configuration passed to the chart.
  *
- * Includes options and data
+ * Includes options and data.
  */
 export interface ChartConfig<T extends AxisChartOptions> {
+	/**
+	 * Chart options configuration.
+	 * @type {T}
+	 */
 	options: T
+
+	/**
+	 * Data for the chart.
+	 * @type {ChartTabularData}
+	 */
 	data: ChartTabularData
 }
 
+/**
+ * Represents a dataset used in a chart.
+ */
 export interface DataSet {
 	/**
-	 * Label for the dataset
+	 * Label for the dataset.
+	 * @type {string}
 	 */
 	label: string
+
 	/**
-	 * Array of hex background colors
+	 * Array of hex background colors.
+	 * @type {string[]}
 	 */
 	fillColors: string[]
+
 	/**
-	 * Array of data values
+	 * Array of data values.
+	 * @type {any[]}
 	 */
 	data: any[]
 }
 
+/**
+ * Represents the data structure for a chart.
+ */
 export interface ChartData {
 	/**
-	 * Labels for the x (horizontal) axis. Should match the number of items in each dataset data array
+	 * Labels for the x (horizontal) axis. Should match the number of items in each dataset data array.
+	 * @type {string[]}
 	 */
 	labels: string[]
+
 	/**
-	 * Array of datasets to display in the chart
+	 * Array of datasets to display in the chart.
+	 * @type {DataSet[]}
 	 */
 	datasets: DataSet[]
 }
diff --git a/packages/core/src/model/meter.ts b/packages/core/src/model/meter.ts
@@ -100,7 +100,7 @@ export class MeterChartModel extends ChartModel {
 					datum['value'] !== null && datum['value'] !== undefined
 						? (value = Number(datum['value']))
 						: (value = 0)
-					let percentValue = Number(((datum['value'] / domainMax) * 100).toFixed(2))
+					const percentValue = Number(((datum['value'] / domainMax) * 100).toFixed(2))
 					return [
 						datum[groupMapsTo],
 						datum['value'] === null ? '&ndash;' : numberFormatter(value, localeCode),

diff --git a/packages/core/src/tests/test-environment.ts b/packages/core/src/tests/test-environment.ts
@@ -1,8 +1,26 @@
 import { ScatterChart } from '@/charts'
-import type { ScatterChartOptions } from '@/interfaces/charts'
+import type { BarChartOptions, ScatterChartOptions } from '@/interfaces/charts'
 import { createChartHolder } from './tools'
-import { ChartTabularData } from '@/interfaces/model'
-import { groupedBarData, groupedBarOptions } from '@/demo/charts/bar'
+import { type ChartTabularData } from '@/interfaces/model'
+import { ScaleTypes } from '@/interfaces/enums'
+
+const groupedBarData: ChartTabularData = []
+const groupedBarOptions: BarChartOptions = {
+	title: 'Pre-selected groups (grouped bar)',
+	data: {
+		selectedGroups: ['Dataset 1', 'Dataset 3']
+	},
+	axes: {
+		left: {
+			mapsTo: 'value'
+		},
+		bottom: {
+			scaleType: ScaleTypes.LABELS,
+			mapsTo: 'key'
+		}
+	},
+	height: '400px'
+}
 
 type ChartOptionsUpdater = (options: ScatterChartOptions) => ScatterChartOptions
 

diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts
@@ -22,7 +22,6 @@ export default defineConfig({
 			formats: ['es']
 		},
 		rollupOptions: {
-			external: ['d3', 'd3-cloud', 'd3-sankey'], // latter two not included in d3
 			output: {
 				entryFileNames: '[name].mjs',
 				chunkFileNames: '[name]-[hash].mjs'