How to achieve the below chart in superset 2.0.1 version?

[KumarSrinivas9030]

Hi,

Can anyone please let me know how to achieve the below chart. I am using 2.0.1 version. I thought of force directed graph but that chart plugin was removed in 2.0.0 version. Please let me know the alternate chart to implement the same.

Thanks in Advance.

[dosubot[bot]]

To create a flowchart similar to the one depicted in the image using Apache Superset version 2.0.1, you can use the ECharts Graph Chart plugin. The ECharts Graph Chart is a good alternative for visualizing flows and relationships between nodes.

Here is an example of how you can use the ECharts Graph Chart in Apache Superset:

/**
 * 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 { QueryFormData } from '@superset-ui/core';
import { GraphNodeItemOption } from 'echarts/types/src/chart/graph/GraphSeries';
import { SeriesTooltipOption } from 'echarts/types/src/util/types';
import {
  BaseChartProps,
  BaseTransformedProps,
  ContextMenuTransformedProps,
  LegendFormData,
  LegendOrientation,
  LegendType,
} from '../types';
import { DEFAULT_LEGEND_FORM_DATA } from '../constants';

export type EdgeSymbol = 'none' | 'circle' | 'arrow';

export type EchartsGraphFormData = QueryFormData &
  LegendFormData & {
    source: string;
    target: string;
    sourceCategory?: string;
    targetCategory?: string;
    colorScheme?: string;
    metric?: string;
    layout?: 'none' | 'circular' | 'force';
    roam: boolean | 'scale' | 'move';
    draggable: boolean;
    selectedMode?: boolean | 'multiple' | 'single';
    showSymbolThreshold: number;
    repulsion: number;
    gravity: number;
    baseNodeSize: number;
    baseEdgeWidth: number;
    edgeLength: number;
    edgeSymbol: string;
    friction: number;
  };

export type EChartGraphNode = Omit<GraphNodeItemOption, 'value'> & {
  value: number;
  col: string;
  tooltip?: Pick<SeriesTooltipOption, 'formatter'>;
};
// @ts-ignore
export const DEFAULT_FORM_DATA: EchartsGraphFormData = {
  ...DEFAULT_LEGEND_FORM_DATA,
  source: '',
  target: '',
  layout: 'force',
  roam: true,
  draggable: false,
  selectedMode: 'single',
  showSymbolThreshold: 0,
  repulsion: 1000,
  gravity: 0.3,
  edgeSymbol: 'none,arrow',
  edgeLength: 400,
  baseEdgeWidth: 3,
  baseNodeSize: 20,
  friction: 0.2,
  legendOrientation: LegendOrientation.Top,
  legendType: LegendType.Scroll,
};

export type tooltipFormatParams = {
  data: { [name: string]: string };
};

export interface EchartsGraphChartProps
  extends BaseChartProps<EchartsGraphFormData> {
  formData: EchartsGraphFormData;
}

export type GraphChartTransformedProps =
  BaseTransformedProps<EchartsGraphFormData> & ContextMenuTransformedProps;

This code defines the types and default form data for the ECharts Graph Chart plugin. You can configure the EchartsGraphFormData to customize the appearance and data of the Graph Chart.

To use this in Apache Superset, you would need to ensure that your data is formatted correctly for a Graph Chart and then configure the chart options accordingly in the Superset UI ^[1][2][3][4].

To continue talking to Dosu, mention @dosu.

[KumarSrinivas9030]

Hi @dosu,

Can you please share constants.tsx and types.tsx file, as these files are imported in the given code but we don't know what are present in those files. Also please share the path of where to add these files.

It would be helpful if you can share all the files that we need to be keep under EchartsGraph Form Data folder as you have done for other plugins as below
Heatmap
- images
Heatmap.tsx
buildQuery.ts
controlPanel.tsx
index.ts
transformProps.ts
types.ts

Thanks.

[KumarSrinivas9030]

Can someone please respond for this? That would be really helpful if i got a solution for this.

Thanks in Advance.