import { includes } from "lodash"; import React from "react"; import { useDebouncedCallback } from "use-debounce"; import { Section, Input, Checkbox, ContextHelp } from "@/components/visualizations/editor"; import { EditorPropTypes } from "@/visualizations"; export default function DataLabelsSettings({ options, onOptionsChange }) { const isShowDataLabelsAvailable = includes( ["line", "area", "column", "scatter", "pie", "heatmap"], options.globalSeriesType ); const [debouncedOnOptionsChange] = useDebouncedCallback(onOptionsChange, 200); return ( {isShowDataLabelsAvailable && (
onOptionsChange({ showDataLabels: event.target.checked })}> Show Data Labels
)}
Number Values Format } data-test="Chart.DataLabels.NumberFormat" defaultValue={options.numberFormat} onChange={e => debouncedOnOptionsChange({ numberFormat: e.target.value })} />
Percent Values Format } data-test="Chart.DataLabels.PercentFormat" defaultValue={options.percentFormat} onChange={e => debouncedOnOptionsChange({ percentFormat: e.target.value })} />
Date/Time Values Format } data-test="Chart.DataLabels.DateTimeFormat" defaultValue={options.dateTimeFormat} onChange={e => debouncedOnOptionsChange({ dateTimeFormat: e.target.value })} />
Data Labels
Use special names to access additional properties:
{"{{ @@name }}"} series name;
{"{{ @@x }}"} x-value;
{"{{ @@y }}"} y-value;
{"{{ @@yPercent }}"} relative y-value;
{"{{ @@yError }}"} y deviation;
{"{{ @@size }}"} bubble size;
Also, all query result columns can be referenced
using {"{{ column_name }}"} syntax.
} data-test="Chart.DataLabels.TextFormat" placeholder="(auto)" defaultValue={options.textFormat} onChange={e => debouncedOnOptionsChange({ textFormat: e.target.value })} />
); } DataLabelsSettings.propTypes = EditorPropTypes;