chore: Add new plugin metadata (apache#1179)

* chore: add new plugin metadata

* inital commit

* capitalization

* Update plugins/legacy-plugin-chart-calendar/src/index.js

* Update plugins/legacy-preset-chart-big-number/src/BigNumber/index.ts

* Update plugins/legacy-plugin-chart-histogram/src/index.js

* edits

* Update plugins/legacy-preset-chart-nvd3/src/Bar/index.js

* fix: single quote

* Update plugins/legacy-preset-chart-big-number/src/BigNumber/index.ts

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update plugins/legacy-preset-chart-nvd3/src/Bullet/index.js

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

Co-authored-by: Phillip Kelley-Dotson <pkelleydotson@yahoo.com>
Co-authored-by: Evan Rusackas <evan@preset.io>
Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-calendar/src/index.js

@@ -22,8 +22,11 @@ import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
+  category: t('Time Series'),
   credits: ['https://github.com/wa0x6e/cal-heatmap'],
-  description: '',
+  description: t(
+    'Displays periods of activity by using a color scale (shading) to highlight the most and least dates on a calendar.',
+  ),
   name: t('Calendar Heatmap'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-chord/src/index.js

@@ -18,12 +18,14 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
+import example from './images/chord.jpg';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   credits: ['https://github.com/d3/d3-chord'],
   description: '',
+  exampleGallery: [{ url: example, caption: t('Relationships between community channels') }],
   name: t('Chord Diagram'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-country-map/src/index.js

@@ -22,8 +22,9 @@ import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Geospatial'),
   credits: ['https://bl.ocks.org/john-guerra'],
-  description: '',
+  description: t('Choropleth maps of various countries, illustrating a metric by region.'),
   name: t('Country Map'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-event-flow/src/index.ts

@@ -21,6 +21,7 @@ import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Distribution'),
   credits: ['https://github.com/williaster/data-ui'],
   description: '',
   name: t('Event Flow'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-heatmap/src/index.js

@@ -18,12 +18,20 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
+import transportation from './images/transportation.jpg';
+import channels from './images/channels.jpg';
+import employment from './images/employment.jpg';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   credits: ['http://bl.ocks.org/mbostock/3074470'],
   description: '',
+  exampleGallery: [
+    { url: transportation, caption: t('Sizes of vehicles') },
+    { url: channels, caption: t('Relationships between community channels') },
+    { url: employment, caption: t('Employment and education') },
+  ],
   name: t('Heatmap'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-histogram/src/index.js

@@ -18,11 +18,19 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
+import example3 from './images/example3.jpg';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   description: '',
+  exampleGallery: [
+    { url: example1, caption: t('Population age data') },
+    { url: example2 },
+    { url: example3 },
+  ],
   name: t('Histogram'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-horizon/src/index.js

@@ -18,12 +18,14 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from './transformProps';
+import example from './images/Horizon_Chart.jpg';
 import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   credits: ['http://kmandov.github.io/d3-horizon-chart/'],
   description: '',
+  exampleGallery: [{ url: example }],
   name: t('Horizon Chart'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/index.ts

@@ -19,10 +19,19 @@
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import controlPanel from './controlPanel';
 import transformProps, { BigNumberChartProps, BigNumberFormData } from './transformProps';
+import example1 from './images/BigNumber.jpg';
+import example2 from './images/BigNumber2.jpg';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
-  description: '',
+  category: t('Time Series'),
+  description: t(
+    'A single number accompanied by a simple line chart, to call attention to an important metric along with its change over time or another dimension. If you find yourself using a lot of big numbers on a dashboard, a more visual chart may help you make your dashboard more informative.',
+  ),
+  exampleGallery: [
+    { url: example1, caption: t('A Big Number') },
+    { url: example2, caption: t('With a subheader') },
+  ],
   name: t('Big Number with Trendline'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumberTotal/index.ts

@@ -22,10 +22,15 @@ import transformProps, {
   BigNumberChartProps,
   BigNumberFormData,
 } from '../BigNumber/transformProps';
+import example from './images/Big_Number_Trendline.jpg';
 import thumbnail from './images/thumbnail.png';
 
 const metadata = new ChartMetadata({
-  description: '',
+  category: t('Composition'),
+  description: t(
+    'A single number that calls attention to an important metric. Good for KPI and strategic dashboards that showcase a few, focused set of metrics.',
+  ),
+  exampleGallery: [{ url: example }],
   name: t('Big Number'),
   thumbnail,
   useLegacyApi: true,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/types/external.d.ts

@@ -18,3 +18,4 @@
  */
 declare module '@data-ui/xy-chart';
 declare module '*.png';
+declare module '*.jpg';

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Area/index.js

@@ -18,15 +18,29 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
+import example1 from './images/example1.jpg';
+import example2 from './images/example2.jpg';
+import example3 from './images/example3.jpg';
+import example4 from './images/example4.jpg';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../vendor/superset/AnnotationTypes';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Distribution'),
   credits: ['http://nvd3.org'],
-  description: '',
+  description: t(
+    'A time series chart that visualizes how the proportions of related metrics vary over time.',
+  ),
+  exampleGallery: [
+    { url: example1, caption: t('Stretched style') },
+    { url: example2, caption: t('Stacked style') },
+    { url: example3, caption: t('Video game consoles') },
+    { url: example4, caption: t('Cars') },
+  ],
   name: t('Area Chart'),
   supportedAnnotationTypes: [ANNOTATION_TYPES.INTERVAL, ANNOTATION_TYPES.EVENT],
+  tags: [t('Time Series'), t('Proportions')],
   thumbnail,
   useLegacyApi: true,
 });

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bar/index.js

@@ -18,13 +18,22 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
+import grouped from './images/grouped.jpg';
+import percentage from './images/percentage.jpg';
+import stacked from './images/stacked.jpg';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../vendor/superset/AnnotationTypes';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Composition'),
   credits: ['http://nvd3.org'],
   description: 'A bar chart where the x axis is time',
+  exampleGallery: [
+    { url: grouped, caption: t('Grouped style') },
+    { url: stacked, caption: t('Stacked style') },
+    { url: percentage, caption: t('Contribution mode') },
+  ],
   name: t('Time-series Bar Chart'),
   supportedAnnotationTypes: [ANNOTATION_TYPES.INTERVAL, ANNOTATION_TYPES.EVENT],
   thumbnail,

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Bullet/index.js

@@ -22,9 +22,13 @@ import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Relationship'),
   credits: ['http://nvd3.org'],
-  description: '',
+  description: t(
+    'Visualize three dimensions of data in a single chart: x-axis, y-axis, and bubble size.',
+  ),
   name: t('Bullet Chart'),
+  tags: [t('Business')],
   thumbnail,
   useLegacyApi: true,
 });

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/DualLine/index.js

@@ -22,6 +22,7 @@ import thumbnail from './images/thumbnail.png';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
+  category: t('Time Series'),
   credits: ['http://nvd3.org'],
   description: '',
   name: t('Dual Line Chart'),

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-nvd3/src/Line/index.js

@@ -18,6 +18,9 @@
  */
 import { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
 import transformProps from '../transformProps';
+import example1 from './images/LineChart.jpg';
+import example2 from './images/LineChart2.jpg';
+import battery from './images/battery.jpg';
 import thumbnail from './images/thumbnail.png';
 import { ANNOTATION_TYPES } from '../vendor/superset/AnnotationTypes';
 import controlPanel from './controlPanel';
@@ -26,6 +29,11 @@ const metadata = new ChartMetadata({
   canBeAnnotationTypes: [ANNOTATION_TYPES.TIME_SERIES],
   credits: ['http://nvd3.org'],
   description: '',
+  exampleGallery: [
+    { url: example1 },
+    { url: example2 },
+    { url: battery, caption: t('Battery level over time') },
+  ],
   name: t('Line Chart'),
   supportedAnnotationTypes: [
     ANNOTATION_TYPES.TIME_SERIES,

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/BoxPlot/index.ts

@@ -20,6 +20,7 @@ import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 import transformProps from './transformProps';
+import example from './images/BoxPlot.jpg';
 import thumbnail from './images/thumbnail.png';
 import { BoxPlotQueryFormData, EchartsBoxPlotChartProps } from './types';
 
@@ -44,8 +45,10 @@ export default class EchartsBoxPlotChartPlugin extends ChartPlugin<
       loadChart: () => import('./EchartsBoxPlot'),
       metadata: new ChartMetadata({
         behaviors: [Behavior.INTERACTIVE_CHART],
+        category: t('Distribution'),
         credits: ['https://echarts.apache.org'],
         description: 'Box Plot (Apache ECharts)',
+        exampleGallery: [{ url: example, caption: t('A Box Plot') }],
         name: t('Box Plot'),
         thumbnail,
       }),

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/types/external.d.ts

@@ -2,3 +2,5 @@ declare module '*.png' {
   const value: any;
   export default value;
 }
+
+declare module '*.jpg';

superset-frontend/temporary_superset_ui/superset-ui/plugins/preset-chart-xy/src/BoxPlot/createMetadata.ts

@@ -3,6 +3,7 @@ import thumbnail from './images/thumbnail.png';
 
 export default function createMetadata(useLegacyApi = false) {
   return new ChartMetadata({
+    category: t('Distribution'),
     description: '',
     name: t('Box Plot'),
     thumbnail,