diff --git a/src/collections/sistent/components/bb-chart/code.mdx b/src/collections/sistent/components/bb-chart/code.mdx new file mode 100644 index 0000000000000..222edd676de3e --- /dev/null +++ b/src/collections/sistent/components/bb-chart/code.mdx @@ -0,0 +1,263 @@ +--- +title: BBChart Code +component: bb-chart +description: Below are code examples demonstrating different ways to use the BBChart component, including line, bar, area, gauge, and donut charts. +--- + +import { BBChart } from "@sistent/sistent"; + +The BBChart component supports multiple chart types for displaying data in dashboards, telemetry interfaces, and other data-driven applications. + +

BBChart Implementation Variants

+ +

Line Chart

+ +Line charts are useful for displaying trends and changes across a sequence of values. + +
+
+ + + +
+ +`} +/> + +
+ +

Bar Chart

+ +Bar charts are useful for comparing values across different categories. + +
+
+ + + +
+ +`} +/> + +
+ +

Area Chart

+ +Area charts are useful for displaying trends while emphasizing the magnitude of the values. + +
+
+ + + +
+ +`} +/> + +
+ +

Gauge Chart

+ +Gauge charts are useful for displaying a single value against a defined range. + +
+
+ + + +
+ +`} +/> + +
+ +

Donut Chart

+ +Donut charts are useful for showing the relative contribution of different categories to a whole. + +
+
+ + + +
+ +`} +/> + +
diff --git a/src/collections/sistent/components/bb-chart/guidance.mdx b/src/collections/sistent/components/bb-chart/guidance.mdx new file mode 100644 index 0000000000000..fefcce5d664fb --- /dev/null +++ b/src/collections/sistent/components/bb-chart/guidance.mdx @@ -0,0 +1,129 @@ +--- +title: BBChart Guidance +component: bb-chart +description: BBChart is a chart component for displaying data through interactive visualizations, including line, bar, area, gauge, and donut charts. It is commonly used for telemetry, monitoring, metrics, and data visualization. +--- + +import { BBChart } from "@sistent/sistent"; + +BBChart provides a reusable interface for displaying data visualizations across Layer5 applications. It is built on Billboard.js and accepts chart configuration through the `options` prop. Use the chart configuration that best represents the data and the relationship you want users to understand. + + +

When to Use

+ + +

Use BBChart when

+ +- You need to visualize numerical or categorical data +- You need to communicate trends across a sequence of values +- You need to compare values between categories +- You need to display telemetry or system metrics +- You need to show resource or service utilization +- You need to represent the composition of a total +- You need to display a metric against a defined range +- You need to provide users with interactive access to data values + +

Choose a chart type based on the data

+ +- Use a **line chart** to show trends or changes across an ordered sequence of values. +- Use a **bar chart** to compare values across discrete categories. +- Use an **area chart** when the trend and magnitude of values are both important. +- Use a **gauge chart** to display a single value against a defined range. +- Use a **donut chart** to show how categories contribute to a total. + +

Avoid using BBChart when

+ +- The information can be communicated more clearly using a simple value or text +- The dataset is too small to benefit from visualization +- A chart would introduce unnecessary visual complexity +- A table is more appropriate because users need to inspect exact values across many rows +- The chart would contain too many categories or data series to remain readable + + +

Chart Options

+ + +BBChart accepts Billboard.js chart configuration through the `options` prop. The `options` object defines the data displayed by the chart and controls properties such as the chart type, axes, tooltips, legends, and chart-specific behavior. + +

Data

+ +Use the `data` option to define the values displayed in the chart. The `columns` property can be used to provide named data series. + +```javascript +data: { + columns: [ + ["CPU", 30, 45, 42, 60], + ["Memory", 50, 52, 51, 58] + ], + type: "line" +} +``` + +

Light and Dark Themes

+ +BBChart can be used with both light and dark application themes. Keep chart configuration aligned with the surrounding UI so that labels, axes, legends, and tooltips remain readable. + +For theme-aware applications, use the theme provided by the surrounding Sistent components and configure Billboard.js styling as needed. + +```javascript +const options = { + data: { + columns: [ + ["CPU", 30, 45, 42, 60], + ["Memory", 50, 52, 51, 58] + ], + type: "line" + }, + axis: { + x: { + type: "category", + categories: ["Mon", "Tue", "Wed", "Thu"] + } + }, + tooltip: { + show: true + } +}; +``` + +

Tooltips

+ +Use the `tooltip` option to control how values are displayed when users interact with chart data. + +```javascript +const options = { + data: { + columns: [ + ["CPU", 30, 45, 42, 60], + ["Memory", 50, 52, 51, 58] + ], + type: "line" + }, + tooltip: { + show: true + } +}; +``` + +

Time-Series Axes

+ +Use a time-series axis when the x-axis represents dates or timestamps. + +```javascript +data: { + x: "x", + columns: [ + ["x", "2026-08-18", "2026-08-19", "2026-08-20", "2026-08-21"], + ["Requests", 30, 45, 42, 60] + ], + type: "line" +}, +axis: { + x: { + type: "timeseries", + tick: { + format: "%Y-%m-%d" + } + } +} +``` \ No newline at end of file diff --git a/src/collections/sistent/components/bb-chart/index.mdx b/src/collections/sistent/components/bb-chart/index.mdx new file mode 100644 index 0000000000000..aa94ae2e3d230 --- /dev/null +++ b/src/collections/sistent/components/bb-chart/index.mdx @@ -0,0 +1,134 @@ +--- +name: "BBChart" +title: BBChart +published: true +component: bb-chart +description: A BBChart component is used to visualize data through charts such as line, bar, area, gauge, and donut charts. It is commonly used for dashboards, telemetry, and data-driven interfaces. +--- + +import { BBChart } from "@sistent/sistent"; + +BBChart is a chart component built with Billboard.js that provides a way to visualize data across dashboards, telemetry views, and other data-driven interfaces. It accepts Billboard.js chart options through the `options` prop and supports multiple chart types. + +

Line Chart

+ +Line charts are useful for displaying changes and trends in data over a sequence of values, such as CPU or memory usage over time. + + + + + + + +

Bar Chart

+ +Bar charts can be used to compare values across different categories, such as requests handled by different services. + + + + + + + +

Area Chart

+ +Area charts are useful for showing changes over a sequence while emphasizing the magnitude of the values. + + + + + + + +

Gauge Chart

+ +Gauge charts are useful for displaying a single value against a defined range, such as CPU utilization or system health. + + + + + + + +

Donut Chart

+ +Donut charts can be used to show how different categories contribute to a whole. + + + + + + \ No newline at end of file