Superset UI Legacy Plugin Chart Sankey Loop

import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey-loop';

const SankeyChartPlugin = require('@superset-ui/legacy-plugin-chart-sankey-loop');

import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey-loop';

// Register the plugin with Superset
const sankeyPlugin = new SankeyChartPlugin();
sankeyPlugin.configure({ key: 'sankey-loop' }).register();

import { SuperChart } from '@superset-ui/core';

<SuperChart
  chartType="sankey-loop"
  width={600}
  height={600}
  formData={{
    groupby: ['source', 'target'],
    metric: 'value',
    color_scheme: 'd3Category10',
    // ... other form data options
  }}
  queriesData={[{
    data: [
      { source: 'A', target: 'B', value: 10 },
      { source: 'B', target: 'C', value: 15 },
      { source: 'C', target: 'A', value: 5 }, // Loop back to A
      // ... more link data
    ]
  }]}
/>

/**
 * Main chart plugin class for Sankey diagram with loops visualization
 * Extends ChartPlugin from @superset-ui/core
 */
class SankeyChartPlugin extends ChartPlugin {
  constructor();
}

/**
 * Configure the plugin with registration key and optional settings
 * @param config - Plugin configuration object with key and other options
 * @param replace - If true, replace entire config; otherwise merge
 * @returns Configured plugin instance for method chaining
 */
configure(config: { key: string, [key: string]: any }, replace?: boolean): SankeyChartPlugin;

/**
 * Register the plugin with Superset's chart registries
 * Registers in ChartMetadataRegistry, ChartComponentRegistry, 
 * ChartControlPanelRegistry, and ChartTransformPropsRegistry
 * @returns Plugin instance for method chaining
 */
register(): SankeyChartPlugin;

/**
 * Remove the plugin from all Superset registries
 * @returns Plugin instance for method chaining
 */
unregister(): SankeyChartPlugin;

/**
 * Reset plugin configuration to defaults
 * @returns Plugin instance for method chaining
 */
resetConfig(): SankeyChartPlugin;

import SankeyChartPlugin from '@superset-ui/legacy-plugin-chart-sankey-loop';

const plugin = new SankeyChartPlugin();
plugin.configure({ key: 'sankey-loop' }).register();

/**
 * Renders a Sankey diagram with loop support using D3.js
 * @param element - DOM element to render the chart into
 * @param props - Chart configuration and data
 */
function SankeyLoop(element: HTMLElement, props: SankeyLoopProps): void;

interface SankeyLoopProps {
  /** Array of link data representing flows between nodes */
  data: Array<{
    source: string;
    target: string;
    value: number;
  }>;
  /** Chart width in pixels */
  width: number;
  /** Chart height in pixels */
  height: number;
  /** Color scheme identifier */
  colorScheme: string;
  /** Slice identifier for consistent coloring */
  sliceId: string | number;
  /** Chart margins (optional, uses default if not provided) */
  margin?: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
}

/**
 * Transforms Superset chart props into format expected by SankeyLoop component
 * @param chartProps - Raw props from Superset including query data and form data
 * @returns Transformed props for the visualization component
 */
function transformProps(chartProps: SupersetChartProps): SankeyLoopProps;

interface SupersetChartProps {
  /** Chart dimensions */
  width: number;
  height: number;
  /** Chart configuration from control panel */
  formData: {
    colorScheme: string;
    sliceId: string | number;
  };
  /** Query results from Superset */
  queriesData: Array<{
    data: Array<{
      source: string;
      target: string;
      value: number;
    }>;
  }>;
  /** Chart margins */
  margin: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
}

/**
 * Link data structure for Sankey diagram
 */
interface LinkData {
  /** Source node identifier */
  source: string;
  /** Target node identifier */  
  target: string;
  /** Flow value between source and target */
  value: number;
}

/**
 * Chart props after transformation
 */
interface ChartProps {
  /** Chart width in pixels */
  width: number;
  /** Chart height in pixels */
  height: number;
  /** Array of link data representing flows */
  data: LinkData[];
  /** Color scheme identifier (e.g., 'd3Category10') */
  colorScheme: string;
  /** Chart margins */
  margin: {
    top: number;
    right: number;
    bottom: number;
    left: number;
  };
  /** Slice identifier for color consistency */
  sliceId: string | number;
}

/**
 * Control panel configuration with sections and controls
 */
interface ControlPanelConfig {
  controlPanelSections: Array<{
    label: string;
    expanded: boolean;
    controlSetRows: string[][];
  }>;
  controlOverrides: {
    groupby: {
      label: string;
      description: string;
    };
  };
}

interface FormData {
  /** Source and target columns array */
  groupby: string[];
  /** Metric column for flow values */
  metric: string;
  /** Selected color scheme identifier */
  color_scheme: string;
  /** Maximum number of rows to process */
  row_limit: number;
  /** Additional filter conditions */
  adhoc_filters: AdhocFilter[];
}

/* Main container class for the entire chart */
.superset-legacy-chart-sankey-loop {
  /* Root SVG container */
}

/* Node rectangle styling */
.superset-legacy-chart-sankey-loop .node rect {
  cursor: move;
  fill-opacity: 0.9;
  shape-rendering: crispEdges;
}

/* Node text label styling */
.superset-legacy-chart-sankey-loop .node text {
  pointer-events: none;
  text-shadow: 0 1px 0 #fff;
}

/* Link default styling */
.superset-legacy-chart-sankey-loop .link {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.2;
}

/* Link hover effects */
.superset-legacy-chart-sankey-loop .link:hover {
  stroke-opacity: 0.5;
}

/* Link path elements */
.superset-legacy-chart-sankey-loop .link path {
  opacity: 0.2;
  stroke-opacity: 0;
}

.superset-legacy-chart-sankey-loop .link:hover path {
  opacity: 0.5;
}

/* Link text labels showing values */
.superset-legacy-chart-sankey-loop .link text {
  fill: #666;
  font-size: 10px;
}

.superset-legacy-chart-sankey-loop .link:hover text {
  opacity: 1;
}

/**
 * Required peer dependencies
 */
interface PeerDependencies {
  "@superset-ui/chart-controls": string;
  "@superset-ui/core": string;
}

/**
 * Direct dependencies
 */
interface Dependencies {
  "d3-sankey-diagram": "^0.7.3";
  "d3-selection": "^1.4.0";
  "prop-types": "^15.6.2";
}