Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dashboard] Pass in title to Charts #122319

Merged
merged 12 commits into from
Feb 7, 2022

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,10 @@ export const gaugeFunction = (): GaugeExpressionFunctionDefinition => ({
required: false,
},
},
fn(data, args) {
fn(data, args, handlers) {
args.ariaLabel =
Copy link
Contributor

@alexwizp alexwizp Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure that I like the idea of mutation args in that way. Am I right that with your changes ariaLabel is in the acceptable arguments for that expression?

I think if we really need to take a description using that way you should:

  1. add ariaLabel into expression definition
ariaLabel: {
      types: ['string'],
      help: 'help text,
      required: false,
    },
  1. update expression function
 fn(data, args, handlers) {
    return {
      type: 'render',
      as: EXPRESSION_GAUGE_NAME,
      value: {
        data,
        args: {
          ...args,
          ariaLabel:
            args.ariaLabel ??
            handlers.variables?.embeddableTitle ??
            handlers.getExecutionContext?.()?.description,
        },
      },
    };
  },

@flash1293 do you have any thoughts?

Copy link
Contributor

@stratoula stratoula Feb 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my point of view we don't want this to be part of the expression. Can we fetch it on the renderer and pass it to the component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see only one possibility to get title it is pass it to handlers.variables or getExecutionContext, but I don't see option how we can fetch it on renderer because ExpressionRenderHandler doesn't include something like this.

Copy link
Contributor

@flash1293 flash1293 Feb 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @alexwizp here - if we use the args to pass it in, we should make it a "real" argument. I don't think it hurts having it as part of the expression interface necessarily - this allows users in Canvas to override it as well.
@ppisljar @crob611 What do you think? Does it make sense to add the ariaLabel argument to all expression function?

(handlers.variables?.embeddableTitle as string) ||
handlers.getExecutionContext?.()?.description;
return {
type: 'render',
as: EXPRESSION_GAUGE_NAME,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export type GaugeArguments = GaugeState & {
shape: GaugeShape;
colorMode: GaugeColorMode;
palette?: PaletteOutput<CustomPaletteState>;
ariaLabel?: string;
};

export type GaugeInput = Datatable;
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,12 @@ export const GaugeComponent: FC<GaugeRenderProps> = memo(

return (
<Chart>
<Settings debugState={window._echDebugStateFlag ?? false} theme={chartTheme} />
<Settings
debugState={window._echDebugStateFlag ?? false}
theme={chartTheme}
ariaLabel={args.ariaLabel}
ariaUseDefaultSummary={!args.ariaLabel}
/>
<Goal
id="goal"
subtype={subtype}
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,9 @@ export const heatmapFunction = (): HeatmapExpressionFunctionDefinition => ({
},
},
fn(data, args, handlers) {
args.ariaLabel =
(handlers.variables?.embeddableTitle as string) ||
handlers.getExecutionContext?.()?.description;
if (handlers?.inspectorAdapters?.tables) {
const argsTable: Dimension[] = [];
if (args.valueAccessor) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export interface HeatmapArguments {
splitColumnAccessor?: string | ExpressionValueVisDimension;
legend: HeatmapLegendConfigResult;
gridConfig: HeatmapGridConfigResult;
ariaLabel?: string;
}

export type HeatmapInput = Datatable;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,8 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
: NaN,
}}
onBrushEnd={onBrushEnd as BrushEndListener}
ariaLabel={args.ariaLabel}
ariaUseDefaultSummary={!args.ariaLabel}
/>
<Heatmap
id="heatmap"
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
bucket: args.bucket,
}),
palette: args.palette,
ariaLabel:
(handlers.variables?.embeddableTitle as string) ||
handlers.getExecutionContext?.()?.description,
};

if (handlers?.inspectorAdapters?.tables) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export interface TagCloudRendererParams extends TagCloudCommonParams {
palette: PaletteOutput;
metric: ExpressionValueVisDimension;
bucket?: ExpressionValueVisDimension;
ariaLabel?: string;
}

export interface TagcloudRendererConfig {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,12 @@ export const TagCloudChart = ({
{(resizeRef) => (
<div className="tgcChart__wrapper" ref={resizeRef} data-test-subj="tagCloudVisualization">
<Chart size="100%">
<Settings onElementClick={handleWordClick} onRenderChange={onRenderChange} />
<Settings
onElementClick={handleWordClick}
onRenderChange={onRenderChange}
ariaLabel={visParams.ariaLabel}
ariaUseDefaultSummary={!visParams.ariaLabel}
/>
<Wordcloud
id="tagCloud"
startAngle={0}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ interface TimelionVisComponentProps {
seriesList: Sheet;
onBrushEvent: (rangeFilterParams: RangeFilterParams) => void;
renderComplete: IInterpreterRenderHandlers['done'];
ariaLabel?: string;
}

const DefaultYAxis = () => (
Expand Down Expand Up @@ -98,6 +99,7 @@ export const TimelionVisComponent = ({
seriesList,
renderComplete,
onBrushEvent,
ariaLabel,
}: TimelionVisComponentProps) => {
const kibana = useKibana<TimelionVisDependencies>();
const chartRef = useRef<Chart>(null);
Expand Down Expand Up @@ -206,6 +208,8 @@ export const TimelionVisComponent = ({
type: TooltipType.VerticalCursor,
}}
externalPointerEvents={{ tooltip: { visible: false } }}
ariaLabel={ariaLabel}
ariaUseDefaultSummary={!ariaLabel}
/>

<Axis
Expand Down
9 changes: 7 additions & 2 deletions src/plugins/vis_types/timelion/public/timelion_vis_fn.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface TimelionRenderValue {
export interface TimelionVisParams {
expression: string;
interval: string;
ariaLabel?: string;
}

export type TimelionExpressionFunctionDefinition = ExpressionFunctionDefinition<
Expand Down Expand Up @@ -57,11 +58,15 @@ export const getTimelionVisualizationConfig = (
help: '',
},
},
async fn(input, args, { getSearchSessionId, getExecutionContext }) {
async fn(input, args, { getSearchSessionId, getExecutionContext, variables }) {
const { getTimelionRequestHandler } = await import('./async_services');
const timelionRequestHandler = getTimelionRequestHandler(dependencies);

const visParams = { expression: args.expression, interval: args.interval };
const visParams = {
expression: args.expression,
interval: args.interval,
ariaLabel: (variables?.embeddableTitle as string) || getExecutionContext?.()?.description,
};

const response = await timelionRequestHandler({
timeRange: get(input, 'timeRange') as TimeRange,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ export const getTimelionVisRenderer: (
<KibanaContextProvider services={{ ...deps }}>
<VisComponent
interval={visParams.interval}
ariaLabel={visParams.ariaLabel}
seriesList={seriesList}
renderComplete={handlers.done}
onBrushEvent={onBrushEvent}
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/vis_types/xy/public/components/xy_settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ type XYSettingsProps = Pick<
legendPosition: Position;
truncateLegend: boolean;
maxLegendLines: number;
ariaLabel?: string;
};

function getValueLabelsStyling() {
Expand Down Expand Up @@ -96,6 +97,7 @@ export const XYSettings: FC<XYSettingsProps> = ({
legendPosition,
maxLegendLines,
truncateLegend,
ariaLabel,
}) => {
const themeService = getThemeService();
const theme = themeService.useChartsTheme();
Expand Down Expand Up @@ -173,6 +175,8 @@ export const XYSettings: FC<XYSettingsProps> = ({
onRenderChange={onRenderChange}
legendAction={legendAction}
tooltip={tooltipProps}
ariaLabel={ariaLabel}
ariaUseDefaultSummary={!ariaLabel}
orderOrdinalBinsBy={
orderBucketsBySum
? {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,9 @@ export const visTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
fn(context, args, handlers) {
const visType = args.chartType;
const visConfig = {
ariaLabel:
(handlers.variables?.embeddableTitle as string) ||
handlers.getExecutionContext?.()?.description,
type: args.chartType,
addLegend: args.addLegend,
addTooltip: args.addTooltip,
Expand Down
1 change: 1 addition & 0 deletions src/plugins/vis_types/xy/public/types/param.ts
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ export interface VisParams {
palette: PaletteOutput;
fillOpacity?: number;
fittingFunction?: Exclude<Fit, 'explicit'>;
ariaLabel?: string;
}

export interface XYVisConfig {
Expand Down
1 change: 1 addition & 0 deletions src/plugins/vis_types/xy/public/vis_component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,7 @@ const VisComponent = (props: VisComponentProps) => {
splitSeriesAccessors,
splitChartColumnAccessor ?? splitChartRowAccessor
)}
ariaLabel={visParams.ariaLabel}
onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params)}
onRenderChange={onRenderChange}
legendAction={
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ export class VisualizeEmbeddable
private filters?: Filter[];
private searchSessionId?: string;
private syncColors?: boolean;
private embeddableTitle?: string;
private visCustomizations?: Pick<VisualizeInput, 'vis' | 'table'>;
private subscriptions: Subscription[] = [];
private expression?: ExpressionAstExpression;
Expand Down Expand Up @@ -140,6 +141,7 @@ export class VisualizeEmbeddable
this.syncColors = this.input.syncColors;
this.searchSessionId = this.input.searchSessionId;
this.query = this.input.query;
this.embeddableTitle = this.getTitle();

this.vis = vis;
this.vis.uiState.on('change', this.uiStateChangeHandler);
Expand Down Expand Up @@ -259,6 +261,11 @@ export class VisualizeEmbeddable
dirty = true;
}

if (this.embeddableTitle !== this.getTitle()) {
this.embeddableTitle = this.getTitle();
dirty = true;
}

if (this.vis.description && this.domNode) {
this.domNode.setAttribute('data-description', this.vis.description);
}
Expand Down Expand Up @@ -406,6 +413,9 @@ export class VisualizeEmbeddable
query: this.input.query,
filters: this.input.filters,
},
variables: {
embeddableTitle: this.getTitle(),
},
searchSessionId: this.input.searchSessionId,
syncColors: this.input.syncColors,
uiState: this.vis.uiState,
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"ariaLabel":null,"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"ariaLabel":null,"bucket":{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"ariaLabel":null,"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"custom","params":{"colors":["#882E72","#B178A6","#D6C1DE","#1965B0","#5289C7","#7BAFDE","#4EB265","#90C987","#CAE0AB","#F7EE55","#F6C141","#F1932D","#E8601C","#DC050C"],"continuity":"above","gradient":false,"range":"percent","rangeMax":null,"rangeMin":0,"stops":[]},"type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
Loading