in src/core/prototypes/plot_segments/axis.ts [1621:1988]
export function buildAxisWidgets(
data: Specification.Types.AxisDataBinding,
axisProperty: string,
manager: Controls.WidgetManager,
axisName: string,
axisWidgetsConfig: AxisWidgetsConfig = defaultAxisWidgetsConfig,
onChange?: () => void
): Controls.Widget[] {
const widgets = [];
const dropzoneOptions: Controls.RowOptions = {
dropzone: {
type: "axis-data-binding",
property: axisProperty,
prompt: axisName + ": " + strings.objects.dropData,
},
noLineHeight: true,
};
const makeAppearance = () => {
return buildAxisAppearanceWidgets(axisProperty, manager, {
isVisible: data.visible,
wordWrap: data.style?.wordWrap ?? false,
isOffset: axisWidgetsConfig.showOffset,
isOnTop: axisWidgetsConfig.showOnTop,
});
};
if (data != null) {
const isDateExpression = data.expression
? data.expression?.includes("date.")
: false;
const scrollingWidgets = axisWidgetsConfig.showScrolling
? buildScrollingAxisWidgets(
data,
axisProperty,
manager,
axisName,
onChange
)
: [];
switch (data.type) {
case "numerical":
{
widgets.push(
manager.verticalGroup(
{
header: strings.objects.general,
},
[
// manager.sectionHeader(
// axisName + strings.objects.axes.numericalSuffix,
// manager.clearButton({ property: axisProperty }, null, true),
// dropzoneOptions
// ),
manager.label(strings.objects.axes.data),
manager.styledHorizontal(
{
alignItems: "start",
},
[1, 0],
manager.sectionHeader(
null,
manager.inputExpression(
{
property: axisProperty,
field: "expression",
},
{}
),
dropzoneOptions
),
manager.clearButton({ property: axisProperty }, null, true, {
marginTop: "1px",
})
),
data.valueType === "date"
? manager.label(strings.objects.dataAxis.range)
: null,
data.valueType === "date"
? manager.inputDate(
{ property: axisProperty, field: "domainMin" },
{ label: strings.objects.dataAxis.start }
)
: null,
data.valueType === "date"
? manager.inputDate(
{ property: axisProperty, field: "domainMax" },
{ label: strings.objects.dataAxis.end }
)
: null,
data.valueType !== "date"
? manager.label(strings.objects.dataAxis.range)
: null,
data.valueType !== "date"
? manager.inputNumber(
{ property: axisProperty, field: "domainMin" },
{
label: strings.objects.axes.from,
observerConfig: {
isObserver: true,
properties: {
property: axisProperty,
field: "autoDomainMin",
},
value: false,
},
}
)
: null,
data.valueType !== "date"
? manager.inputNumber(
{ property: axisProperty, field: "domainMax" },
{
label: strings.objects.axes.to,
observerConfig: {
isObserver: true,
properties: {
property: axisProperty,
field: "autoDomainMax",
},
value: false,
},
}
)
: null,
data.numericalMode != "temporal"
? manager.inputSelect(
{ property: axisProperty, field: "numericalMode" },
{
options: ["linear", "logarithmic"],
labels: [
strings.scale.linear,
strings.scale.logarithmic,
],
showLabel: true,
type: "dropdown",
label: "Mode",
}
)
: null,
manager.inputSelect(
{ property: axisProperty, field: "tickFormatType" },
{
options: [
TickFormatType.None,
TickFormatType.Date,
TickFormatType.Number,
],
labels: [
strings.objects.axes.tickDataFormatTypeNone,
strings.objects.axes.tickDataFormatTypeDate,
strings.objects.axes.tickDataFormatTypeNumber,
],
showLabel: true,
type: "dropdown",
label: strings.objects.axes.tickDataFormatType,
}
),
data.tickFormatType !== TickFormatType.None
? manager.inputExpression(
{
property: axisProperty,
field: "tickDataExpression",
},
{
label: strings.objects.axes.tickData,
}
)
: null,
manager.inputFormat(
{
property: axisProperty,
field: "tickFormat",
},
{
blank: strings.core.auto,
isDateField:
data.numericalMode === NumericalMode.Temporal ||
data.valueType === DataType.Date,
label: strings.objects.axes.tickFormat,
}
),
...scrollingWidgets,
]
)
);
widgets.push(makeAppearance());
}
break;
case "categorical":
{
widgets.push(
manager.verticalGroup(
{
header: strings.objects.general,
},
[
// manager.sectionHeader(
// strings.objects.axes.data,
// manager.clearButton({ property: axisProperty }, null, true),
// dropzoneOptions
// ),
// manager.vertical(
manager.label(strings.objects.axes.data),
manager.styledHorizontal(
{
alignItems: "start",
},
[1, 0],
manager.sectionHeader(
null,
manager.inputExpression(
{
property: axisProperty,
field: "expression",
},
{}
),
dropzoneOptions
),
isDateExpression
? manager.reorderWidget(
{ property: axisProperty, field: "categories" },
{ allowReset: true }
)
: null,
manager.clearButton({ property: axisProperty }, null, true, {
marginTop: "1px",
})
),
!isDateExpression
? getOrderByAnotherColumnWidgets(data, axisProperty, manager)
: null,
manager.inputNumber(
{ property: axisProperty, field: "gapRatio" },
{
minimum: 0,
maximum: 1,
percentage: true,
showSlider: true,
label: "Gap",
}
),
data.valueType === "date"
? (manager.inputExpression(
{
property: axisProperty,
field: "tickDataExpression",
},
{
label: strings.objects.axes.tickData,
}
),
manager.row(
strings.objects.axes.tickFormat,
manager.inputFormat(
{
property: axisProperty,
field: "tickFormat",
},
{
blank: strings.core.auto,
isDateField:
data.numericalMode === NumericalMode.Temporal ||
data.valueType === DataType.Date,
}
)
))
: null,
...scrollingWidgets,
// )
]
)
);
widgets.push(buildInteractivityGroup(axisProperty, manager));
widgets.push(makeAppearance());
}
break;
case "default":
{
widgets.push(
manager.sectionHeader(
axisName + strings.objects.axes.stackingSuffix,
manager.clearButton({ property: axisProperty }, null, true),
{
...dropzoneOptions,
noLineHeight: false,
}
),
manager.inputNumber(
{ property: axisProperty, field: "gapRatio" },
{
minimum: 0,
maximum: 1,
percentage: true,
showSlider: true,
label: "Gap",
}
)
);
}
break;
}
widgets.push(
manager.verticalGroup(
{
header: axisName + strings.objects.dataAxis.exportProperties,
},
[
manager.inputBoolean(
{
property: axisProperty,
field: "autoDomainMin",
},
{
type: "checkbox",
label: strings.objects.dataAxis.autoMin,
}
),
manager.inputBoolean(
{
property: axisProperty,
field: "autoDomainMax",
},
{
type: "checkbox",
label: strings.objects.dataAxis.autoMax,
}
),
]
)
);
} else {
widgets.push(
// manager.sectionHeader(
// axisName + ": " + strings.core.none,
// null,
// dropzoneOptions
// )
manager.verticalGroup(
{
header: strings.objects.general,
},
[
manager.label(strings.objects.axes.data),
manager.horizontal(
[1, 0, 0, 0],
manager.sectionHeader(
null,
manager.inputText(
{
property: null,
},
{
disabled: true,
value: strings.core.none,
}
),
dropzoneOptions
)
),
]
)
);
}
return widgets;
}