Line data    Source code

       1              : import * as React from 'react';
       2              : import type { TopLevelSpec } from 'vega-lite';
       3              : 
       4              : import * as styles from './visualization.module.css';
       5              : import { createVegaLitePreviewConfig } from '../../ui/vegalite/vegalite_theme.js';
       6              : import { QueryExecutionState } from '../../query/query_execution_state.js';
       7              : import { VegaLiteView, type VegaLiteViewDependencies } from './vegalite_view.js';
       8              : 
       9              : /// The inset of the chart in its box, the padding of the preview style
      10              : export const VEGALITE_PREVIEW_INSET = 8;
      11              : 
      12              : interface Props {
      13              :     query: QueryExecutionState | null;
      14              :     vegaLiteSpec: TopLevelSpec | null;
      15              :     /// The size of the box of the preview, the chart fits into it with its inset
      16              :     width: number;
      17              :     height: number;
      18              :     dependencies?: VegaLiteViewDependencies;
      19              : }
      20              : 
      21              : /// A chart in a small box, e.g. on the dataflow canvas: the preview config with smaller text and marks, no legends,
      22              : /// and the whole plot fitted into the box
      23            1 : export function VegaLitePreview(props: Props): React.ReactElement {
      24            1 :     return (
      25            1 :         <VegaLiteView
      26            1 :             query={props.query}
      27            1 :             vegaLiteSpec={props.vegaLiteSpec}
      28            1 :             width={Math.max(0, props.width - 2 * VEGALITE_PREVIEW_INSET)}
      29            1 :             height={Math.max(0, props.height - 2 * VEGALITE_PREVIEW_INSET)}
      30            1 :             config={createVegaLitePreviewConfig}
      31            1 :             className={styles.preview}
      32            1 :             hideLegend
      33            1 :             dependencies={props.dependencies}
      34            1 :         />
      35              :     );
      36            1 : }