feat: file skeleton necessary for icicle chart visualization (#162)

* feat: file skeleton necessary for icicle chart visualization

* feat: name changes and restructure components

update package to account for clearer name and reorganized implementation for planned features

* feat: fix lint errors

* docs: add license file headers, adjust naming and links

Add Apache license file headers to all files, adjust naming of the viz in the package.json and
update the README to inform that Storybook link is unavailable but will be in the near future

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/README.md

@@ -0,0 +1,39 @@
+## @superset-ui/plugin-chart-icicle
+
+## WIP
+
+This is a work in progress with the design being finalized.
+
+This plugin provides Icicle Event Chart for Superset.
+
+### Usage
+
+Configure `key`, which can be any `string`, and register the plugin. This `key` will be used to lookup this chart throughout the app.
+
+```js
+import IcicleEventVizPlugin from '@superset-ui/plugin-chart-icicle-event';
+
+new IcicleEventVizPlugin()
+  .configure({ key: 'icicle' })
+  .register();
+```
+
+Then use it via `SuperChart`. A link to Storybook for the Icicle Event Chart will be available here in the future for more details.
+
+```js
+<SuperChart
+  chartType="icicle"
+  chartProps={{
+    width: 600,
+    height: 600,
+    formData: {...},
+    payload: {
+      data: {...},
+    },
+  }}
+/>
+```
+
+### Current Prototype (Subject to Change)
+
+![Current Prototype](./src/images/thumbnail.png)

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@superset-ui/plugin-chart-icicle-event",
+  "version": "0.10.32",
+  "description": "Superset Chart Plugin - Icicle Event",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "files": [
+    "esm",
+    "lib",
+    "types"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/apache-superset/superset-ui-plugins.git"
+  },
+  "keywords": [
+    "superset"
+  ],
+  "author": "Superset",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/apache-superset/superset-ui-plugins/issues"
+  },
+  "homepage": "https://github.com/apache-superset/superset-ui-plugins#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@types/d3": "^5.7.2",
+    "@types/d3-hierarchy": "^1.1.6",
+    "d3": "^5.9.7",
+    "d3-array": "^2.2.0",
+    "d3-hierarchy": "^1.1.8",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.6.2"
+  },
+  "peerDependencies": {
+    "@superset-ui/chart": "^0.11.6",
+    "@superset-ui/color": "^0.11.0",
+    "@superset-ui/core": "^0.11.0",
+    "@superset-ui/translation": "^0.11.0",
+    "react": "^16.2"
+  }
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx

@@ -0,0 +1,65 @@
+/**
+ * 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, { Component, createRef } from 'react';
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { IcicleEventNode } from '../types/IcicleEventNode';
+
+interface Props {
+  className?: string;
+  width: number;
+  height: number;
+  boxMargin: {
+    x: number;
+    y: number;
+  };
+  color: (name: string) => string;
+  contentRenderer: () => void;
+  d3TreeRoot: HierarchyRectangularNode<IcicleEventNode>;
+  isVertical: boolean;
+  rounding: number;
+  transitionDuration: number;
+}
+
+export default class IcicleEventChart extends Component<Props> {
+  private chartRef = createRef<HTMLDivElement>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.renderIcicleChart = this.renderIcicleChart.bind(this);
+  }
+
+  componentDidMount() {
+    this.renderIcicleChart();
+  }
+
+  // Check for changed data to rerender the icicle chart
+  componentDidUpdate(prevProps: Props) {}
+
+  // Creates chart using svg & chartRef to the div element
+  renderIcicleChart() {}
+
+  render() {
+    return (
+      <div>
+        <div ref={this.chartRef} />
+      </div>
+    );
+  }
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventViz.tsx

@@ -0,0 +1,39 @@
+/**
+ * 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, { PureComponent } from 'react';
+import { IcicleEventNode } from '../types/IcicleEventNode';
+
+interface Props {
+  className?: string;
+  width: number;
+  height: number;
+  data: IcicleEventNode;
+  color: (name: string) => string;
+  isVertical: boolean;
+  rounding: number;
+  transitionDuration: number;
+}
+
+export default class IcicleEventViz extends PureComponent<Props> {
+  render() {
+    // TODO: create d3 partition & layout w/ memoization & pass into chart here
+
+    return <div>Icicle Event Chart Component</div>;
+  }
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/createMetadata.ts

@@ -0,0 +1,30 @@
+/**
+ * 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 } from '@superset-ui/translation';
+import { ChartMetadata } from '@superset-ui/chart';
+import thumbnail from './images/thumbnail.png';
+
+export default function createMetadata(useLegacyApi = false) {
+  return new ChartMetadata({
+    description: '',
+    name: t('Icicle Event Chart'),
+    thumbnail,
+    useLegacyApi,
+  });
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/index.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { ChartPlugin } from '@superset-ui/chart';
+import createMetadata from './createMetadata';
+import transformProps from './transformProps';
+
+export default class IcicleEventVizPlugin extends ChartPlugin {
+  constructor() {
+    super({
+      loadChart: () => import('./IcicleEventViz'),
+      metadata: createMetadata(),
+      transformProps,
+    });
+  }
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/transformProps.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 } from '@superset-ui/chart';
+
+export default function transformProps(chartProps: ChartProps) {
+  return {};
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/IcicleEventTreeHelpers.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { max as d3Max } from 'd3-array';
+import { HierarchyRectangularNode } from 'd3-hierarchy';
+import { IcicleEventNode } from '../../types/IcicleEventNode';
+
+export function findDepth(node: IcicleEventNode, depth: number = 0): number {
+  if (!node.children) {
+    return depth;
+  }
+
+  const maxDepth = d3Max(node.children.map(child => findDepth(child, depth + 1)));
+
+  return maxDepth || depth;
+}
+
+export function hierarchySort(
+  a: HierarchyRectangularNode<IcicleEventNode>,
+  b: HierarchyRectangularNode<IcicleEventNode>,
+): number {
+  if (a && a.value && b && b.value) {
+    return b.value - a.value || b.height - a.height;
+  }
+
+  return 0;
+}

superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/RenderedIcicleAccessors.ts

@@ -0,0 +1,57 @@
+/**
+ * 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 { HierarchyRectangularNode } from 'd3-hierarchy';
+import { IcicleEventNode } from '../../types/IcicleEventNode';
+
+export function x0(isVertical: boolean, d: HierarchyRectangularNode<IcicleEventNode>) {
+  return isVertical ? d.y0 : d.x0;
+}
+
+export function x1(isVertical: boolean, d: HierarchyRectangularNode<IcicleEventNode>) {
+  return isVertical ? d.y1 : d.x1;
+}
+
+export function y0(isVertical: boolean, d: HierarchyRectangularNode<IcicleEventNode>) {
+  return isVertical ? d.x0 : d.y0;
+}
+
+export function y1(isVertical: boolean, d: HierarchyRectangularNode<IcicleEventNode>) {
+  return isVertical ? d.x1 : d.y1;
+}
+
+export function rectWidth(
+  isVertical: boolean,
+  boxMargin: { x: number; y: number },
+  d: HierarchyRectangularNode<IcicleEventNode>,
+) {
+  return Math.max(0, y1(isVertical, d) - y0(isVertical, d) - boxMargin.y * 2);
+}
+
+export function rectHeight(
+  isVertical: boolean,
+  boxMargin: { x: number; y: number },
+  d: HierarchyRectangularNode<IcicleEventNode>,
+) {
+  return Math.max(
+    0,
+    x1(isVertical, d) -
+      x0(isVertical, d) -
+      (Math.min(1, (x1(isVertical, d) - x0(isVertical, d)) / 2) + boxMargin.x * 2),
+  );
+}