tessl/npm-superset-ui--legacy-plugin-chart-rose
A Nightingale Rose Diagram visualization plugin for Apache Superset that creates polar coordinate charts with equal-angle wedges where values are represented by area rather than radius.
- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
To install, run
npx @tessl/cli install tessl/npm-superset-ui--legacy-plugin-chart-rose@0.18.0index.mddocs/
Superset Legacy Rose Chart Plugin
A Nightingale Rose Diagram visualization plugin for Apache Superset that creates polar coordinate charts where data values are represented as sectors with varying radii. The chart displays data in a circular format with equal-angle wedges, making it ideal for showing categorical data with quantitative dimensions and temporal patterns.
Package Information
- Package Name: @superset-ui/legacy-plugin-chart-rose
- Package Type: npm
- Language: JavaScript (ES6+)
- Installation: This plugin is typically bundled with Apache Superset. For standalone use:
npm install @superset-ui/legacy-plugin-chart-rose
Core Imports
import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';For CommonJS:
const RoseChartPlugin = require('@superset-ui/legacy-plugin-chart-rose').default;Basic Usage
import { SuperChart } from '@superset-ui/core';
import RoseChartPlugin from '@superset-ui/legacy-plugin-chart-rose';
// Register the plugin with Superset
new RoseChartPlugin().configure({ key: 'rose' }).register();
// Use within Superset or with SuperChart
const roseChart = (
<SuperChart
chartType="rose"
width={600}
height={400}
formData={{
colorScheme: 'd3Category10',
numberFormat: 'SMART_NUMBER',
dateTimeFormat: 'smart_date',
richTooltip: true,
roseAreaProportion: false,
sliceId: 1
}}
queriesData={[{
data: {
"1609459200000": [
{ key: ["Product A"], name: ["Product A"], time: 1609459200000, value: 100 },
{ key: ["Product B"], name: ["Product B"], time: 1609459200000, value: 75 }
],
"1609545600000": [
{ key: ["Product A"], name: ["Product A"], time: 1609545600000, value: 120 },
{ key: ["Product B"], name: ["Product B"], time: 1609545600000, value: 90 }
]
}
}]}
/>
);In Superset, the plugin is automatically registered and available as a "Nightingale Rose Chart" visualization type when creating new charts.
Architecture
The rose chart plugin is built around several key components:
- RoseChartPlugin: Main plugin class that integrates with Superset's chart ecosystem
- Rose Component: Core D3.js-based visualization component that renders the actual chart
- ReactRose Wrapper: React component wrapper with styling and emotion integration
- Control Panel: Configuration interface for chart customization options
- Transform Props: Data transformation layer that converts Superset data format to chart props
Capabilities
Chart Plugin Registration
Main plugin class for registering the rose chart with Superset.
export default class RoseChartPlugin extends ChartPlugin {
constructor() {
super({
loadChart: () => import('./ReactRose'),
metadata: ChartMetadata,
transformProps: transformProps,
controlPanel: controlPanel,
});
}
}
class ChartPlugin {
configure(config) { /* inherited method */ }
register() { /* inherited method */ }
}The plugin automatically configures chart metadata:
- Category: "Ranking"
- Name: "Nightingale Rose Chart"
- Description: "A polar coordinate chart where the circle is broken into wedges of equal angle"
- Tags: Legacy, Advanced-Analytics, Circular, Multi-Layers, Pattern, Time, Trend
- Legacy API: Uses legacy Superset API (useLegacyApi: true)
- Example Gallery: Includes thumbnail and example images
Chart Rendering
Core visualization component that renders the rose diagram using D3.js.
function Rose(element, props) {
// D3.js-based chart rendering function
}
// PropTypes validation
Rose.propTypes = {
data: PropTypes.objectOf(
PropTypes.arrayOf(
PropTypes.shape({
key: PropTypes.arrayOf(PropTypes.string),
name: PropTypes.arrayOf(PropTypes.string),
time: PropTypes.number,
value: PropTypes.number,
}),
),
),
width: PropTypes.number,
height: PropTypes.number,
colorScheme: PropTypes.string,
dateTimeFormat: PropTypes.string,
numberFormat: PropTypes.string,
useRichTooltip: PropTypes.bool,
useAreaProportions: PropTypes.bool,
sliceId: PropTypes.number,
};
// Data structure
const RoseData = {
"1609459200000": [
{
key: ["Category A"],
name: ["Category A"],
time: 1609459200000,
value: 100
}
]
};The Rose component creates an interactive polar coordinate chart with the following features:
- Circular layout with equal-angle time segments
- Radial encoding of values (area or radius based)
- Interactive hover effects with tooltips
- Click interactions for drilling down into time segments
- Legend with toggle functionality for series visibility
- Animated transitions between states
React Integration
React wrapper component with styling and theming support.
const ReactRose = ({ className, ...otherProps }) => (
<div className={className}>
<Global styles={theme => css`/* tooltip styles */`} />
<ReactComponent {...otherProps} />
</div>
);
export default styled(ReactRose)`/* chart styles */`;
// Component props (passed to ReactComponent)
const reactRoseProps = {
className: String, // optional
width: Number,
height: Number,
data: Object, // RoseData format
colorScheme: String,
dateTimeFormat: String,
numberFormat: String,
useRichTooltip: Boolean,
useAreaProportions: Boolean,
sliceId: Number,
};The ReactRose component provides:
- Global CSS styling through emotion
- Theme integration for consistent appearance
- Responsive design support
- Tooltip styling and positioning
Data Transformation
Transforms chart properties from Superset format to component props.
export default function transformProps(chartProps) {
const { width, height, formData, queriesData } = chartProps;
const {
colorScheme,
dateTimeFormat,
numberFormat,
richTooltip,
roseAreaProportion,
sliceId,
} = formData;
return {
width,
height,
data: queriesData[0].data,
colorScheme,
dateTimeFormat,
numberFormat,
useAreaProportions: roseAreaProportion,
useRichTooltip: richTooltip,
sliceId,
};
}
// Input structure
const SupersetChartProps = {
width: Number,
height: Number,
formData: {
colorScheme: String,
dateTimeFormat: String,
numberFormat: String,
richTooltip: Boolean,
roseAreaProportion: Boolean,
sliceId: Number,
},
queriesData: [{
data: Object // RoseData format
}]
};Control Panel Configuration
Configuration object defining available chart options and controls.
const config = {
controlPanelSections: [
sections.legacyTimeseriesTime,
{
label: 'Query',
expanded: true,
controlSetRows: [
['metrics'],
['adhoc_filters'],
['groupby'],
['limit', 'timeseries_limit_metric'],
['order_desc'],
[{
name: 'contribution',
config: {
type: 'CheckboxControl',
label: 'Contribution',
default: false,
description: 'Compute the contribution to the total',
},
}],
['row_limit', null],
],
},
{
label: 'Chart Options',
expanded: true,
controlSetRows: [
['color_scheme'],
[
{
name: 'number_format',
config: {
type: 'SelectControl',
freeForm: true,
label: 'Number format',
renderTrigger: true,
default: 'SMART_NUMBER',
choices: D3_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
},
{
name: 'date_time_format',
config: {
type: 'SelectControl',
freeForm: true,
label: 'Date Time Format',
renderTrigger: true,
default: 'smart_date',
choices: D3_TIME_FORMAT_OPTIONS,
description: D3_FORMAT_DOCS,
},
},
],
[
{
name: 'rich_tooltip',
config: {
type: 'CheckboxControl',
label: 'Rich Tooltip',
renderTrigger: true,
default: true,
description: 'The rich tooltip shows a list of all series for that point in time',
},
},
{
name: 'rose_area_proportion',
config: {
type: 'CheckboxControl',
label: 'Use Area Proportions',
description: 'Check if the Rose Chart should use segment area instead of segment radius for proportioning',
default: false,
renderTrigger: true,
},
},
],
],
},
// Advanced Analytics section with rolling window, time comparison, resample options
],
formDataOverrides: formData => ({
...formData,
groupby: getStandardizedControls().popAllColumns(),
metrics: getStandardizedControls().popAllMetrics(),
}),
};The control panel provides:
- Time series configuration (legacy format)
- Query options (metrics, filters, groupby, limits)
- Chart customization (color scheme, formatting)
- Tooltip configuration options
- Area vs radius proportion toggle
- Advanced analytics (rolling windows, time comparison, resampling)
Chart Features
Visual Encoding Options
- Area Proportions: When enabled, uses segment area for value encoding instead of radius
- Rich Tooltips: Shows all series data for a time point vs single series
- Color Schemes: Supports Superset's categorical color schemes
- Number/Date Formatting: Configurable display formats using D3 format specifications
Interactions
- Hover Effects: Segments expand on hover with smooth transitions
- Click Navigation: Click segments to drill down into time-specific pie chart view
- Legend Toggle: Click legend items to show/hide data series
- Animated Transitions: Smooth animations between chart states
Data Requirements
- Time Series Data: Data must be grouped by timestamp keys
- Value Structure: Each data point requires key, name, time, and value fields
- Multiple Series: Supports multiple data series per time period
- Sorting: Data is automatically sorted by value within each time period
Dependencies
Peer Dependencies
// Required peer dependencies that must be installed separately
"@emotion/react": "^11.4.1"
"@superset-ui/chart-controls": "*"
"@superset-ui/core": "*"
"react": "^16.13.1"Direct Dependencies
// Automatically installed dependencies
"d3": "^3.5.17" // D3.js visualization library (legacy version)
"nvd3-fork": "^2.0.5" // NVD3 charting components fork
"prop-types": "^15.6.2" // React prop validationError Handling
The component handles various error conditions:
- Missing or malformed data gracefully degrades
- Invalid date/number formats fall back to defaults
- Rendering errors are contained within the chart component
- Tooltip positioning adjusts to viewport boundaries
Performance Considerations
- Lazy loading of chart component through dynamic imports
- Efficient D3 data binding and updates
- Optimized transition animations
- Memory cleanup on component unmount
- Responsive design with configurable dimensions