[New Viz] Nightingale Rose Chart

superset/assets/javascripts/explore/stores/controls.jsx

@@ -1746,6 +1746,17 @@ export const controls = {
     controlName: 'TimeSeriesColumnControl',
   },
 
+  rose_area_proportion: {
+    type: 'CheckboxControl',
+    label: t('Use Area Proportions'),
+    description: t(
+      'Check if the Rose Chart should use segment area instead of ' +
+      'segment radius for proportioning',
+    ),
+    default: false,
+    renderTrigger: true,
+  },
+
   time_series_option: {
     type: 'SelectControl',
     label: t('Options'),

superset/assets/javascripts/explore/stores/visTypes.js

@@ -1541,6 +1541,25 @@ export const visTypes = {
     ],
   },
 
+  rose: {
+    label: t('Time Series - Nightingale Rose Chart'),
+    showOnExplore: true,
+    requiresTime: true,
+    controlPanelSections: [
+      sections.NVD3TimeSeries[0],
+      {
+        label: t('Chart Options'),
+        expanded: false,
+        controlSetRows: [
+          ['color_scheme'],
+          ['number_format', 'date_time_format'],
+          ['rich_tooltip', 'rose_area_proportion'],
+        ],
+      },
+      sections.NVD3TimeSeries[1],
+    ],
+  },
+
   partition: {
     label: 'Partition Diagram',
     showOnExplore: true,

superset/assets/visualizations/main.js

@@ -48,6 +48,7 @@ export const VIZ_TYPES = {
   deck_multi: 'deck_multi',
   deck_arc: 'deck_arc',
   deck_polygon: 'deck_polygon',
+  rose: 'rose',
 };
 
 const vizMap = {
@@ -97,5 +98,6 @@ const vizMap = {
   [VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default,
   [VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default,
   [VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
+  [VIZ_TYPES.rose]: require('./rose.js'),
 };
 export default vizMap;

superset/assets/visualizations/rose.css

@@ -0,0 +1,24 @@
+.rose path {
+  transition: fill-opacity 180ms linear;
+  stroke: #fff;
+  stroke-width: 1px;
+  stroke-opacity: 1;
+  fill-opacity: 0.75;
+}
+
+.rose text {
+  font: 400 12px Arial, sans-serif;
+  pointer-events: none;
+}
+
+.rose .clickable path {
+  cursor: pointer;
+}
+
+.rose .hover path {
+  fill-opacity: 1;
+}
+
+.nv-legend .nv-series {
+  cursor: pointer;
+}