feat: Adds plugin-chart-handlebars (#17903)

* adds: plugin chart handlebars

* adds: handlebars plugin to main presets

* update: npm install

* chore: lint

* adds: dateFormat handlebars helper

* deletes: unused props

* chore: linting plugin-chart-handlebars

* docs: chart-plugin-handlebars

* adds: moment to peer deps

* update: use error handling

* update: inline config, adds renderTrigger

* update: inline config, adds renderTrigger

* camelCase controls

* (plugins-chart-handlebars) adds: missing props

Adds missing propeties in test formData

* (plugin-chart-handlebars) fixes test

* (plugin-handlebars-chart) use numbers for size

* (feature-handlebars-chart) fix viz_type

* (plugin-handlebars-chart) revert

revert the viz_type change. it was in the wrong place.

* fix test and add license headers

Co-authored-by: Ville Brofeldt <ville.v.brofeldt@gmail.com>

superset-frontend/plugins/plugin-chart-handlebars/src/plugin/transformProps.ts

@@ -0,0 +1,67 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ChartProps, TimeseriesDataRecord } from '@superset-ui/core';
+
+export default function transformProps(chartProps: ChartProps) {
+  /**
+   * This function is called after a successful response has been
+   * received from the chart data endpoint, and is used to transform
+   * the incoming data prior to being sent to the Visualization.
+   *
+   * The transformProps function is also quite useful to return
+   * additional/modified props to your data viz component. The formData
+   * can also be accessed from your Handlebars.tsx file, but
+   * doing supplying custom props here is often handy for integrating third
+   * party libraries that rely on specific props.
+   *
+   * A description of properties in `chartProps`:
+   * - `height`, `width`: the height/width of the DOM element in which
+   *   the chart is located
+   * - `formData`: the chart data request payload that was sent to the
+   *   backend.
+   * - `queriesData`: the chart data response payload that was received
+   *   from the backend. Some notable properties of `queriesData`:
+   *   - `data`: an array with data, each row with an object mapping
+   *     the column/alias to its value. Example:
+   *     `[{ col1: 'abc', metric1: 10 }, { col1: 'xyz', metric1: 20 }]`
+   *   - `rowcount`: the number of rows in `data`
+   *   - `query`: the query that was issued.
+   *
+   * Please note: the transformProps function gets cached when the
+   * application loads. When making changes to the `transformProps`
+   * function during development with hot reloading, changes won't
+   * be seen until restarting the development server.
+   */
+  const { width, height, formData, queriesData } = chartProps;
+  const data = queriesData[0].data as TimeseriesDataRecord[];
+
+  return {
+    width,
+    height,
+
+    data: data.map(item => ({
+      ...item,
+      // convert epoch to native Date
+      // eslint-disable-next-line no-underscore-dangle
+      __timestamp: new Date(item.__timestamp as number),
+    })),
+    // and now your control data, manipulated as needed, and passed through as props!
+    formData,
+  };
+}