diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/README.md b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/README.md new file mode 100644 index 000000000000..fcddb4f3aa65 --- /dev/null +++ b/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 + +``` + +### Current Prototype (Subject to Change) + +![Current Prototype](./src/images/thumbnail.png) diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/package.json b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/package.json new file mode 100644 index 000000000000..101933e42a50 --- /dev/null +++ b/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" + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventChart.tsx new file mode 100644 index 000000000000..84bfd880fe71 --- /dev/null +++ b/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; + isVertical: boolean; + rounding: number; + transitionDuration: number; +} + +export default class IcicleEventChart extends Component { + private chartRef = createRef(); + + 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 ( +
+
+
+ ); + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventViz.tsx b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/IcicleEventViz.tsx new file mode 100644 index 000000000000..f46199eb803d --- /dev/null +++ b/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 { + render() { + // TODO: create d3 partition & layout w/ memoization & pass into chart here + + return
Icicle Event Chart Component
; + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/createMetadata.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/createMetadata.ts new file mode 100644 index 000000000000..f44f113a3bfa --- /dev/null +++ b/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, + }); +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/images/thumbnail.png b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/images/thumbnail.png new file mode 100644 index 000000000000..568c889ef1a3 Binary files /dev/null and b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/images/thumbnail.png differ diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/index.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/index.ts new file mode 100644 index 000000000000..6427b7699083 --- /dev/null +++ b/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, + }); + } +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/transformProps.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/transformProps.ts new file mode 100644 index 000000000000..fd0598767950 --- /dev/null +++ b/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 {}; +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/IcicleEventTreeHelpers.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/IcicleEventTreeHelpers.ts new file mode 100644 index 000000000000..bd92b5913d03 --- /dev/null +++ b/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, + b: HierarchyRectangularNode, +): number { + if (a && a.value && b && b.value) { + return b.value - a.value || b.height - a.height; + } + + return 0; +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/RenderedIcicleAccessors.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/src/utils/RenderedIcicleAccessors.ts new file mode 100644 index 000000000000..60ff1b65ab67 --- /dev/null +++ b/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) { + return isVertical ? d.y0 : d.x0; +} + +export function x1(isVertical: boolean, d: HierarchyRectangularNode) { + return isVertical ? d.y1 : d.x1; +} + +export function y0(isVertical: boolean, d: HierarchyRectangularNode) { + return isVertical ? d.x0 : d.y0; +} + +export function y1(isVertical: boolean, d: HierarchyRectangularNode) { + return isVertical ? d.x1 : d.y1; +} + +export function rectWidth( + isVertical: boolean, + boxMargin: { x: number; y: number }, + d: HierarchyRectangularNode, +) { + 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, +) { + return Math.max( + 0, + x1(isVertical, d) - + x0(isVertical, d) - + (Math.min(1, (x1(isVertical, d) - x0(isVertical, d)) / 2) + boxMargin.x * 2), + ); +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/IcicleEventNode.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/IcicleEventNode.ts new file mode 100644 index 000000000000..e7c8c88cd89c --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/IcicleEventNode.ts @@ -0,0 +1,25 @@ +/** + * 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 type IcicleEventNode = { + id: string; + event: string; + name?: string; + value: number; + children?: [IcicleEventNode] +} diff --git a/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/external.d.ts b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/external.d.ts new file mode 100644 index 000000000000..8f7985ceaf13 --- /dev/null +++ b/superset-frontend/temporary_superset_ui/superset-ui/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-icicle-event/types/external.d.ts @@ -0,0 +1,22 @@ +/** + * 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. + */ +declare module '*.png' { + const value: any; + export default value; +}