@helioviewer/superset-plugin-chart-big-calendar 1.0.0

package/README.md

@@ -0,0 +1,66 @@
+# superset-plugin-chart-big-calendar
+
+This is the Big Calendar Heatmap Superset Chart Plugin. It provides a different
+kind of calendar heatmap which works for showing large amounts of calendar data
+spread out over multiple years. Each calendar month is represented by one
+vertical column of the heatmap, which allows you to display multiyear data
+in a usable form factor.
+
+## Features
+
+- Allows you to display calendar data over multiple years. The built-in calendar heatmap is terrible if you need to show more than a few months of data.
+- Supports linear and logarithmic scaling for metrics.
+- Supports custom colors
+
+### Installation
+
+1. Navigate to your superset installation's front end code and install the plugin.
+
+```bash
+cd <your_superset>/superset-frontend
+npm i @helioviewer/superset-plugin-chart-big-calendar
+```
+
+2. Register the chart plugin by editing `<your_superset>/superset-frontend/src/visualizations/presets/MainPreset.js`. At the top of the file, import the chart plugin, and add it to the plugin list
+
+```javascript
+// ... other imports ...
+import { SupersetPluginChartBigCalendar } from '@helioviewer/superset-plugin-chart-big-calendar';
+
+// ... other code ...
+      plugins: [
+        new SupersetPluginChartBigCalendar().configure({key: 'ext-big-calendar-heatmap'}),
+        // ... other plugins ...
+      ]
+// ... other code ...
+```
+
+### Usage
+
+WANTED - If you're a developer and you know how to work with chart plugins,
+we could use your help to simplify this process.
+
+1. Select your date column and edit the Custom SQL so that it returns `DATE(date_column)`. The resulting custom function should be named `date` as the plugin expects to see a column named `date`.
+
+2. Select your metric, typically `COUNT(*)`. The plugin expects a column named `count`, if your metric is different, try renaming it to count.
+
+The plugin does not support multiple metrics nor multiple columns. There should be only one date column and one metric selected.
+
+Edit customization options as-desired.
+
+### Developer Usage
+
+To build the plugin, run the following commands:
+
+```
+npm ci
+npm run build
+```
+
+Alternatively, to run the plugin in development mode (=rebuilding whenever changes are made), start the dev server with the following command:
+
+```
+npm run dev
+```
+
+To add the package to Superset, see Usage section above.

package/esm/SupersetPluginChartBigCalendar.js

@@ -0,0 +1,148 @@
+var _templateObject;
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
+/**
+ * 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 React, { useEffect, createRef } from 'react';
+import { styled } from '@superset-ui/core';
+import * as echarts from 'echarts';
+
+// The following Styles component is a <div> element, which has been styled using Emotion
+// For docs, visit https://emotion.sh/docs/styled
+
+// Theming variables are provided for your use via a ThemeProvider
+// imported from @superset-ui/core. For variables available, please visit
+// https://github.com/apache-superset/superset-ui/blob/master/packages/superset-ui-core/src/style/index.ts
+
+var Styles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: ", "px;\n  width: ", "px;\n"])), _ref => {
+  var {
+    height
+  } = _ref;
+  return height;
+}, _ref2 => {
+  var {
+    width
+  } = _ref2;
+  return width;
+});
+
+/**
+ * ******************* WHAT YOU CAN BUILD HERE *******************
+ *  In essence, a chart is given a few key ingredients to work with:
+ *  * Data: provided via `props.data`
+ *  * A DOM element
+ *  * FormData (your controls!) provided as props by transformProps.ts
+ */
+
+function get_date(unixTime) {
+  // Create a Date object from the Unix timestamp
+  var date = new Date(unixTime);
+
+  // Get the month name
+  var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  var month = monthNames[date.getMonth()];
+  var year = date.getFullYear();
+  return month + " " + year;
+}
+function removeDuplicates(array) {
+  return array.filter((item, index) => array.indexOf(item) === index);
+}
+function map_element(object, unix_timestamp) {
+  var objectDate = new Date(object.date);
+  var referenceDate = new Date(unix_timestamp);
+
+  // Calculate months difference
+  var monthsDiff = (objectDate.getFullYear() - referenceDate.getFullYear()) * 12 + (objectDate.getMonth() - referenceDate.getMonth());
+
+  // Get day of the month
+  var dayOfMonth = objectDate.getDate();
+
+  // Return the array
+  return [monthsDiff, 31 - dayOfMonth, object.count];
+}
+export default function SupersetPluginChartBigCalendar(props) {
+  // height and width are the height and width of the DOM element as it exists in the dashboard.
+  // There is also a `data` prop, which is, of course, your DATA 🎉
+  var {
+    data,
+    height,
+    width
+  } = props;
+  var rootElem = /*#__PURE__*/createRef();
+  var logBase = parseInt(props.logScale);
+  var useLogarithmScale = props.rangeType === "Logarithmic";
+  var modifiedData = data.map(el => _extends({}, el, {
+    count: useLogarithmScale ? Math.log(el.count) / Math.log(logBase) : el.count
+  }));
+
+  // Often, you just want to access the DOM and do whatever you want.
+  // Here, you can do that with createRef, and the useEffect hook.
+  useEffect(() => {
+    echarts.init(rootElem.current, null, {
+      renderer: 'canvas',
+      useDirtyRect: false
+    }).setOption({
+      tooltip: {
+        position: 'top',
+        formatter: params => {
+          var name = params.name;
+          var value = params.value;
+          return "\n            <b>" + (31 - value[1]) + " " + echarts.format.encodeHTML(name) + "</b>\n            &mdash;\n            " + (useLogarithmScale ? Math.round(logBase ** value[2]) : value[2]) + "\n          ";
+        }
+      },
+      xAxis: {
+        type: 'category',
+        data: removeDuplicates(data.map(elem => get_date(elem.date))),
+        axisLabel: {
+          rotate: parseInt(props.xAxisAngle)
+        }
+      },
+      yAxis: {
+        type: 'category',
+        data: Array.from(Array(31).keys()).map(n => n + 1).reverse() // Returns [1, 2, 3, 4, ..., 31],
+      },
+      visualMap: {
+        min: 0,
+        // @ts-ignore
+        max: modifiedData.reduce((max, el) => el.count > max ? el.count : max, 0),
+        type: 'continuous',
+        orient: 'horizontal',
+        left: 'center',
+        top: 65,
+        inRange: {
+          color: props.colorRange ? props.colorRange.map(v => "rgba(" + v.r + ", " + v.g + ", " + v.b + ", " + v.a + ")") : ['rgba(173, 216, 230, 1)', 'rgba(135, 206, 235, 1)', 'rgba(0, 191, 255, 1)', 'rgba(30, 144, 255, 1)', 'rgba(0, 0, 255, 1)']
+        },
+        outOfRange: {
+          color: 'rgba(0, 0, 0, 1)'
+        },
+        formatter: useLogarithmScale ? v => Math.round(logBase ** v) : v => v
+      },
+      series: [{
+        type: 'heatmap',
+        data: modifiedData.map(elem => map_element(elem, data[0].date))
+      }]
+    });
+  });
+  console.log('Plugin props', props);
+  return /*#__PURE__*/React.createElement(Styles, {
+    ref: rootElem,
+    width: width,
+    height: height
+  });
+}

package/esm/index.js

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export { default as SupersetPluginChartBigCalendar } from './plugin';
+/**
+ * Note: this file exports the default export from SupersetPluginChartBigCalendar.tsx.
+ * If you want to export multiple visualization modules, you will need to
+ * either add additional plugin folders (similar in structure to ./plugin)
+ * OR export multiple instances of `ChartPlugin` extensions in ./plugin/index.ts
+ * which in turn load exports from SupersetPluginChartBigCalendar.tsx
+ */

package/esm/plugin/buildQuery.js

@@ -0,0 +1,43 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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 { buildQueryContext } from '@superset-ui/core';
+
+/**
+ * The buildQuery function is used to create an instance of QueryContext that's
+ * sent to the chart data endpoint. In addition to containing information of which
+ * datasource to use, it specifies the type (e.g. full payload, samples, query) and
+ * format (e.g. CSV or JSON) of the result and whether or not to force refresh the data from
+ * the datasource as opposed to using a cached copy of the data, if available.
+ *
+ * More importantly though, QueryContext contains a property `queries`, which is an array of
+ * QueryObjects specifying individual data requests to be made. A QueryObject specifies which
+ * columns, metrics and filters, among others, to use during the query. Usually it will be enough
+ * to specify just one query based on the baseQueryObject, but for some more advanced use cases
+ * it is possible to define post processing operations in the QueryObject, or multiple queries
+ * if a viz needs multiple different result sets.
+ */
+export default function buildQuery(formData) {
+  var {
+    cols: groupby
+  } = formData;
+  return buildQueryContext(formData, baseQueryObject => [_extends({}, baseQueryObject, {
+    groupby
+  })]);
+}

package/esm/plugin/controlPanel.js

@@ -0,0 +1,202 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
+/**
+ * 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 { t, validateNonEmpty, validateNumber } from '@superset-ui/core';
+import { nanoid } from 'nanoid';
+import { sharedControls } from '@superset-ui/chart-controls';
+var config = {
+  /**
+   * The control panel is split into two tabs: "Query" and
+   * "Chart Options". The controls that define the inputs to
+   * the chart data request, such as columns and metrics, usually
+   * reside within "Query", while controls that affect the visual
+   * appearance or functionality of the chart are under the
+   * "Chart Options" section.
+   *
+   * There are several predefined controls that can be used.
+   * Some examples:
+   * - groupby: columns to group by (translated to GROUP BY statement)
+   * - series: same as groupby, but single selection.
+   * - metrics: multiple metrics (translated to aggregate expression)
+   * - metric: sane as metrics, but single selection
+   * - adhoc_filters: filters (translated to WHERE or HAVING
+   *   depending on filter type)
+   * - row_limit: maximum number of rows (translated to LIMIT statement)
+   *
+   * If a control panel has both a `series` and `groupby` control, and
+   * the user has chosen `col1` as the value for the `series` control,
+   * and `col2` and `col3` as values for the `groupby` control,
+   * the resulting query will contain three `groupby` columns. This is because
+   * we considered `series` control a `groupby` query field and its value
+   * will automatically append the `groupby` field when the query is generated.
+   *
+   * It is also possible to define custom controls by importing the
+   * necessary dependencies and overriding the default parameters, which
+   * can then be placed in the `controlSetRows` section
+   * of the `Query` section instead of a predefined control.
+   *
+   * import { validateNonEmpty } from '@superset-ui/core';
+   * import {
+   *   sharedControls,
+   *   ControlConfig,
+   *   ControlPanelConfig,
+   * } from '@superset-ui/chart-controls';
+   *
+   * const myControl: ControlConfig<'SelectControl'> = {
+   *   name: 'secondary_entity',
+   *   config: {
+   *     ...sharedControls.entity,
+   *     type: 'SelectControl',
+   *     label: t('Secondary Entity'),
+   *     mapStateToProps: state => ({
+   *       sharedControls.columnChoices(state.datasource)
+   *       .columns.filter(c => c.groupby)
+   *     })
+   *     validators: [validateNonEmpty],
+   *   },
+   * }
+   *
+   * In addition to the basic drop down control, there are several predefined
+   * control types (can be set via the `type` property) that can be used. Some
+   * commonly used examples:
+   * - SelectControl: Dropdown to select single or multiple values,
+       usually columns
+   * - MetricsControl: Dropdown to select metrics, triggering a modal
+       to define Metric details
+   * - AdhocFilterControl: Control to choose filters
+   * - CheckboxControl: A checkbox for choosing true/false values
+   * - SliderControl: A slider with min/max values
+   * - TextControl: Control for text data
+   *
+   * For more control input types, check out the `incubator-superset` repo
+   * and open this file: superset-frontend/src/explore/components/controls/index.js
+   *
+   * To ensure all controls have been filled out correctly, the following
+   * validators are provided
+   * by the `@superset-ui/core/lib/validator`:
+   * - validateNonEmpty: must have at least one value
+   * - validateInteger: must be an integer value
+   * - validateNumber: must be an integer or decimal value
+   */
+
+  // For control input types, see: superset-frontend/src/explore/components/controls/index.js
+  controlPanelSections: [{
+    label: t('Query'),
+    expanded: true,
+    tabOverride: 'data',
+    controlSetRows: [[{
+      name: 'cols',
+      config: _extends({}, sharedControls.groupby, {
+        label: t('Columns'),
+        description: t('Columns to group by')
+      })
+    }], [{
+      name: 'metrics',
+      config: _extends({}, sharedControls.metrics, {
+        // it's possible to add validators to controls if
+        // certain selections/types need to be enforced
+        validators: [validateNonEmpty]
+      })
+    }], ['adhoc_filters'], [{
+      name: 'row_limit',
+      config: sharedControls.row_limit
+    }]]
+  }, {
+    label: t('Customizations'),
+    expanded: true,
+    tabOverride: 'customize',
+    controlSetRows: [[{
+      name: 'x_axis_angle',
+      config: {
+        type: 'TextControl',
+        default: -45,
+        renderTrigger: true,
+        // ^ this makes it apply instantaneously, without triggering a "run query" button
+        label: t('Label Angle'),
+        description: t('Angle of the X-Axis labels. Edit this if your labels are overlapping'),
+        validators: [validateNonEmpty, validateNumber]
+      }
+    }], [{
+      name: 'range_type',
+      config: {
+        type: 'SelectControl',
+        label: t('Range Type'),
+        description: t('Whether colors should be displayed on a logarithmic or linear scale'),
+        default: 'Linear',
+        choices: [['Linear', 'Linear'], ['Logarithmic', 'Logarithmic']],
+        renderTrigger: true
+      }
+    }], [{
+      name: 'log_scale',
+      config: {
+        type: 'TextControl',
+        label: t('Log Scale'),
+        default: 10,
+        renderTrigger: true,
+        description: t('Base of logarithm when using logarithmic scale'),
+        validators: [validateNumber]
+      }
+    }]]
+  }, {
+    label: t('Colors'),
+    expanded: true,
+    tabOverride: 'customize',
+    controlSetRows: [[{
+      name: 'color_range',
+      config: {
+        controlName: 'ColorPickerControl',
+        type: 'CollectionControl',
+        label: t('Color ranges'),
+        renderTrigger: false,
+        value: [],
+        itemGenerator: () => ({
+          key: nanoid(11),
+          r: 0,
+          g: 0,
+          b: 0,
+          a: 1,
+          value: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1
+          }
+        }),
+        keyAccessor: function keyAccessor(o) {
+          if (this.actions.____modified === undefined) {
+            var oldSetControlValue = this.actions.setControlValue;
+            this.actions.setControlValue = (name, value, errors) => {
+              oldSetControlValue(name, name == "color_range" ? value.map(v => _extends({}, v, {
+                value: {
+                  r: v.r,
+                  g: v.g,
+                  b: v.b,
+                  a: v.a
+                }
+              })) : value, errors);
+            };
+            this.actions.____modified = true;
+          }
+          return o.key;
+        }
+      }
+    }]]
+  }]
+};
+export default config;

package/esm/plugin/index.js

@@ -0,0 +1,49 @@
+/**
+ * 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 { t, ChartMetadata, ChartPlugin } from '@superset-ui/core';
+import buildQuery from './buildQuery';
+import controlPanel from './controlPanel';
+import transformProps from './transformProps';
+import thumbnail from '../images/thumbnail.jpg';
+export default class SupersetPluginChartBigCalendar extends ChartPlugin {
+  /**
+   * The constructor is used to pass relevant metadata and callbacks that get
+   * registered in respective registries that are used throughout the library
+   * and application. A more thorough description of each property is given in
+   * the respective imported file.
+   *
+   * It is worth noting that `buildQuery` and is optional, and only needed for
+   * advanced visualizations that require either post processing operations
+   * (pivoting, rolling aggregations, sorting etc) or submitting multiple queries.
+   */
+  constructor() {
+    var metadata = new ChartMetadata({
+      description: 'Big Calendar Heatmap',
+      name: t('Big Calendar'),
+      thumbnail
+    });
+    super({
+      buildQuery,
+      controlPanel,
+      loadChart: () => import('../SupersetPluginChartBigCalendar'),
+      metadata,
+      transformProps
+    });
+  }
+}

package/esm/plugin/transformProps.js

@@ -0,0 +1,72 @@
+/**
+ * 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.
+ */
+
+export default function transformProps(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 SupersetPluginChartBigCalendar.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.
+   */
+  var {
+    width,
+    height,
+    formData,
+    queriesData
+  } = chartProps;
+  var {
+    xAxisAngle,
+    colorRange,
+    rangeType,
+    logScale
+  } = formData;
+  var data = queriesData[0].data;
+  return {
+    width,
+    height,
+    data,
+    xAxisAngle,
+    colorRange,
+    rangeType,
+    logScale
+  };
+}

package/esm/types.js

@@ -0,0 +1 @@
+export {};

package/lib/SupersetPluginChartBigCalendar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SupersetPluginChartBigCalendarProps } from './types';
+export default function SupersetPluginChartBigCalendar(props: SupersetPluginChartBigCalendarProps): JSX.Element;
+//# sourceMappingURL=SupersetPluginChartBigCalendar.d.ts.map

package/lib/SupersetPluginChartBigCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupersetPluginChartBigCalendar.d.ts","sourceRoot":"","sources":["../src/SupersetPluginChartBigCalendar.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,mCAAmC,EAA6C,MAAM,SAAS,CAAC;AA4DzG,MAAM,CAAC,OAAO,UAAU,8BAA8B,CAAC,KAAK,EAAE,mCAAmC,eA2EhG"}