npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@moatamed-sce/ui-charts

v0.1.5

Published

SCE Platform data-visualisation components built on ECharts.

Downloads

233

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lib-moatamed-scelib-moatamed-sce

Keywords

sceangularchartsechartsdataviz

Readme

@moatamed-sce/ui-charts

The data-visualisation layer of the SCE Platform: 76 chart components built on Apache ECharts, each one an Angular wrapper that takes typed data in and paints a themed, RTL-aware, accessible chart.

The point of the wrappers is that no feature ever writes an ECharts option object. Series colours, axis ink, tooltip cards, dark mode, Arabic direction, resize handling and instance disposal are solved once here; a page passes [series] and [categories].

Status — not published

This package is not currently on npmjs.org. It exists in the SCE monorepo and in the build output. Inside the monorepo it resolves through a TypeScript path alias.

What's in it

Charts, by family — every one with the selector sce-<name>-chart:

  • Comparison — bar, horizontal-bar, diverging-bar, multi-segment-bar, lollipop, dumbbell, pictorial-bar, marimekko, pareto, radial-bar, polar-bar
  • Trend — line, area, range-area, bump, burndown, cumulative-flow, control, candlestick, ohlc-volume
  • Composition — pie, donut, ring, rose, funnel, pyramid, population-pyramid, sankey, icicle
  • Distribution — histogram, boxplot, scatter, scatter-regression, effect-scatter, bubble, quadrant, punch-card, correlation-matrix, parallel-coordinates
  • Relationship — chord, arc-diagram, force-graph, network-graph, flow-map
  • Time and progress — gantt, calendar-heatmap, heatmap, cohort-retention, gauge, multi-segment-gauge, bullet, scale-indicator
  • Geo — region-map
  • Supporting — sce-chart-legend, sce-chart-state, sce-chart-data-table

Plus the theming primitives every chart shares: CHART_PALETTE_LIGHT / CHART_PALETTE_DARK, CHART_SEQUENTIAL, CHART_DIVERGING, CHART_STATUS, CHART_INK, and injectChartMode().

Why injectChartMode() exists

The rest of the design system gets dark mode for free: [data-theme='dark'] on <html> reroutes every CSS custom property. A chart cannot — it is painted onto a <canvas>, which inherits no CSS at all, so its colours are resolved in TypeScript when the option object is built. injectChartMode() returns a signal tracking the theme attribute, and the charts rebuild their options when it flips. Without it a chart keeps light-mode axis ink on a dark surface and its label text all but disappears.

Pass [mode] explicitly only when a chart must ignore the app theme — a chart being rasterised into a PDF, for instance.

Peer dependencies

Angular 21 (@angular/core), echarts, ngx-echarts, RxJS 7.8, @moatamed-sce/core and @moatamed-sce/ui-components.

Note the direction of that last one: charts may use design-system atoms, and no atom may use a chart. The @nx/enforce-module-boundaries rule makes that machine-enforced, not aspirational.

Quick start

import { SceBarChartComponent, type BarSeriesData } from '@moatamed-sce/ui-charts';

readonly series: BarSeriesData[] = [
  { name: 'Contracts', data: [12, 19, 7, 22] },
];
readonly categories = ['Q1', 'Q2', 'Q3', 'Q4'];
<sce-bar-chart
  [series]="series"
  [categories]="categories"
  [height]="320"
  [loading]="loading()"
  [empty]="!series.length"
  [ariaLabel]="'DASHBOARD.CHARTS.CONTRACTS_BY_QUARTER' | translate"
/>

Every chart shares the same state and accessibility inputs, so a page never hand-rolls them:

| Input | Purpose | | -------------------------- | --------------------------------------------------------- | | loading / loadingLabel | Skeleton state while data is in flight | | empty / emptyText | The no-data state, distinct from an error | | errorText | The failed state, with the message to show | | ariaLabel | The chart's accessible name — a canvas has none otherwise | | mode | Force 'light' / 'dark'; omit to follow the app theme | | isRtl | Force direction; omit to follow the app locale | | height / width | Explicit size; height defaults to 300 |

Performance

Charts are heavy. Put them behind @defer (on viewport) — the repo's rule for below-the-fold visualisations — so a dashboard's initial bundle does not carry ECharts for a chart the user may never scroll to.

Not in this package

Maps are not here. Leaflet lives in @moatamed-sce/ui-components (sce-osm-leaflet-map) and @moatamed-sce/core. The only geographic component in this library is sce-region-map-chart, which is an ECharts choropleth rather than a tile map.

Docs

License

MIT