Chore/UI chart kit release 0.1.0 by Omaima33 · Pull Request #1 · CISCODE-MA/ChartKit-UI

Omaima33 · 2026-04-03T14:21:24Z

No description provided.

…/line/area support and theme-based color fallback

…pport, and internal config builder

…king, and shared config builder

…ion, and 80%+ coverage

sonarqubecloud · 2026-04-03T14:22:33Z

Quality Gate failed

Failed conditions
15.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

Copilot

Pull request overview

Introduces the initial @ciscode/ui-chart-kit release by adding typed chart primitives (data/theme/contracts), a shared Chart.js config builder, and React components for Bar/Line/Area charts with Vitest coverage.

Changes:

Added buildChartConfig utility plus type contracts (ChartDataset, ChartTheme, etc.) and re-exported them from the package entrypoint.
Added BarChart, LineChart, and AreaChart components built on react-chartjs-2 with component/unit tests.
Updated package metadata/docs for the new chart-kit package and added Chart.js dependencies.

Reviewed changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/utils/index.ts	Re-exports the new `buildChartConfig` util from the utils barrel.
src/utils/buildChartConfig.ts	Builds Chart.js config from typed datasets/theme for bar/line/area variants.
src/utils/buildChartConfig.test.ts	Unit tests for config building behavior (variants, defaults, color cycling).
src/types/index.ts	Exposes chart type contracts via a types barrel export.
src/types/chart.types.ts	Defines public chart data/theme/config TypeScript contracts.
src/index.ts	Exposes `types` from the public package entrypoint.
src/components/LineChart/LineChart.types.ts	Defines `LineChart` public props typed with the new chart contracts.
src/components/LineChart/LineChart.tsx	Implements `LineChart` using `react-chartjs-2` + shared config builder.
src/components/LineChart/LineChart.test.tsx	Component tests for `LineChart` rendering and smooth option behavior.
src/components/LineChart/index.ts	Adds `LineChart` exports (component + props type).
src/components/index.ts	Exposes new chart components from the components barrel.
src/components/BarChart/index.ts	Adds `BarChart` exports (component + props type).
src/components/BarChart/BarChart.types.ts	Defines `BarChart` public props (stacked/horizontal).
src/components/BarChart/BarChart.tsx	Implements `BarChart` with stacked/horizontal support via options mutations.
src/components/BarChart/BarChart.test.tsx	Component tests for `BarChart` rendering and stacked/horizontal options.
src/components/AreaChart/index.ts	Adds `AreaChart` exports (component + props type).
src/components/AreaChart/AreaChart.types.ts	Defines `AreaChart` public props (smooth/stacked).
src/components/AreaChart/AreaChart.tsx	Implements `AreaChart` using area variant + optional smooth/stacked behavior.
src/components/AreaChart/AreaChart.test.tsx	Component tests for `AreaChart` fill/opacity/smooth/stacked behaviors.
README.md	Replaces template README with chart-kit installation, types, component usage, and design notes.
package.json	Renames package to `@ciscode/ui-chart-kit@0.1.0` and adds Chart.js dependencies.
package-lock.json	Adds locked dependencies for Chart.js/react-chartjs-2.
ciscode-reactts-developerkit-1.0.0.tgz	Adds a committed `.tgz` artifact to the repo.
.changeset/initial-release.md	Adds a Changesets entry describing the initial chart-kit release.

Copilot · 2026-04-03T14:25:43Z

src/utils/buildChartConfig.ts

+} from '../types/chart.types';
+
+function resolveColor(dataset: ChartDataset, index: number, theme: ChartTheme): string {
+  return dataset.color ?? theme.colors[index % theme.colors.length];


resolveColor can return undefined (and produce NaN indexing) when theme.colors is an empty array (index % theme.colors.length). Since ChartTheme.colors is only typed as string[], an empty palette is possible at runtime and would break chart rendering. Consider validating theme.colors.length > 0 (throw a clear error or provide a fallback color) before using it.

Suggested change

return dataset.color ?? theme.colors[index % theme.colors.length];

if (dataset.color) {

return dataset.color;

}

if (theme.colors.length === 0) {

throw new Error('Chart theme must provide at least one color.');

}

return theme.colors[index % theme.colors.length];

Copilot · 2026-04-03T14:25:43Z

src/utils/buildChartConfig.ts

+      datasets: datasets.map((ds, i) => buildDataset(ds, i, theme, variant)),
+    },
+    options: {
+      responsive: true,


The components expose a height prop and wrap the chart in a fixed-height div, but buildChartConfig doesn't set options.maintainAspectRatio = false. With Chart.js defaults (maintainAspectRatio: true), the chart height typically derives from width/aspectRatio and may ignore the container height, so the documented pixel height may not be honored. Consider setting maintainAspectRatio: false in the returned options to make the height prop effective.

Suggested change

responsive: true,

responsive: true,

maintainAspectRatio: false,

Copilot · 2026-04-03T14:25:43Z

src/components/index.ts

 // Example placeholder export — replace with real components later.
 export const __components_placeholder = true;

 export * from './NoopButton';
+export * from './BarChart';


The library entrypoint now exports real chart components, but __components_placeholder is still exported as part of the public API. For a v0.1.0 release, this placeholder export is likely unintended surface area that you'll have to support (or break) later. Consider removing the placeholder export now that there are real exports.

Copilot · 2026-04-03T14:25:43Z

src/utils/index.ts

 // Example placeholder export — replace with real utils later.
 export const __utils_placeholder = true;

 export * from './noop';
+export * from './buildChartConfig';


__utils_placeholder remains exported from src/utils/index.ts, which makes it part of the package's public API via src/index.ts. Now that real utilities are present, consider removing this placeholder export to avoid publishing an unintended API symbol.

Copilot · 2026-04-03T14:25:44Z

.changeset/initial-release.md

+'@ciscode/ui-chart-kit': minor
+---
+
+Initial release of @ciscode/ui-chart-kit v0.1.0.


This changeset is marked as a minor bump but the PR already sets package.json to 0.1.0 and the text hard-codes "v0.1.0". If you run changeset version, a minor changeset will bump 0.1.0 → 0.2.0, which conflicts with the stated initial release version. Consider adjusting the bump type and/or removing the hard-coded version from the changeset body so the release version is driven by Changesets.

Suggested change

'@ciscode/ui-chart-kit': minor

---

Initial release of @ciscode/ui-chart-kit v0.1.0.

'@ciscode/ui-chart-kit': patch

---

Initial release of @ciscode/ui-chart-kit.

Omaima33 added 5 commits March 31, 2026 16:22

feat: add typed chart contracts and buildChartConfig utility with bar…

65a0013

…/line/area support and theme-based color fallback

feat: add BarChart component with typed props, stacking/horizontal su…

d56e280

…pport, and internal config builder

feat: add LineChart and AreaChart with smooth option, area fill, stac…

6fc8277

…king, and shared config builder

test: add full test suite with mocked react-chartjs-2, config validat…

17d076a

…ion, and 80%+ coverage

chore: add README and changeset

e3111b0

Copilot AI review requested due to automatic review settings April 3, 2026 14:21

Copilot started reviewing on behalf of Omaima33 April 3, 2026 14:22 View session

Merge branch 'develop' into chore/ui-chart-kit-release-0.1.0

eed8fcb

Omaima33 requested a review from a team as a code owner April 3, 2026 14:22

Copilot AI reviewed Apr 3, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chore/UI chart kit release 0.1.0#1

Chore/UI chart kit release 0.1.0#1
Omaima33 wants to merge 6 commits intodevelopfrom
chore/ui-chart-kit-release-0.1.0

Omaima33 commented Apr 3, 2026

Uh oh!

sonarqubecloud bot commented Apr 3, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Copilot AI Apr 3, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-  return dataset.color ?? theme.colors[index % theme.colors.length];
+  if (dataset.color) {
+    return dataset.color;
+  }
+  if (theme.colors.length === 0) {
+    throw new Error('Chart theme must provide at least one color.');
+  }
+  return theme.colors[index % theme.colors.length];

	responsive: true,
	responsive: true,
	maintainAspectRatio: false,

Conversation

Omaima33 commented Apr 3, 2026

Uh oh!

sonarqubecloud bot commented Apr 3, 2026

Quality Gate failed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants