mstr-viz/template-use-react/formatPanelConfig/textAndForm/textAndFormConfig.js

A new dev tool for creating custom visualizations

import { PROPERTIES_ENUM } from "../enums";
import { emptyVizWarningMessage } from "../utils";

const attributeConfig = {
  tagName: "VerticalLayout",
  children: [
    {
      tagName: "Text",
      className: "section-header-text",
      text: mstrmojo.descP("<%= pluginName %>.", "10", "Attribute"),
    },
    {
      tagName: "FontConfig",
      keyIDs: {
        fontName: PROPERTIES_ENUM.ATTRIBUTE_FONT_FAMILY,
        fontStyle: PROPERTIES_ENUM.ATTRIBUTE_FONT_STYLE,
        fontSize: PROPERTIES_ENUM.ATTRIBUTE_FONT_SIZE,
        fontColor: PROPERTIES_ENUM.ATTRIBUTE_FONT_COLOR,
      },
      displayOptions: ["nameSelect", "style", "sizeAndColor"],
    },
    {
      tagName: "FontConfig",
      keyIDs: {
        fontName: PROPERTIES_ENUM.COLORBY_FONT_FAMILY,
        fontStyle: PROPERTIES_ENUM.COLORBY_FONT_STYLE,
        fontSize: PROPERTIES_ENUM.COLORBY_FONT_SIZE,
        fontColor: PROPERTIES_ENUM.COLORBY_FONT_COLOR,
      },
      displayOptions: ["nameSelect", "style", "sizeAndColor"],
    },
  ],
};

const metricConfig = {
  tagName: "VerticalLayout",
  children: [
    {
      tagName: "Text",
      className: "section-header-text",
      text: mstrmojo.descP("<%= pluginName %>.", "12", "Metric"),
    },
    {
      tagName: "FontConfig",
      keyIDs: {
        fontName: PROPERTIES_ENUM.METRIC_FONT_FAMILY,
        fontStyle: PROPERTIES_ENUM.METRIC_FONT_STYLE,
        fontSize: PROPERTIES_ENUM.METRIC_FONT_SIZE,
        fontColor: PROPERTIES_ENUM.METRIC_FONT_COLOR,
      },
      displayOptions: ["nameSelect", "style", "sizeAndColor"],
    },
    {
      tagName: "FontConfig",
      keyIDs: {
        fontName: PROPERTIES_ENUM.SIZEBY_FONT_FAMILY,
        fontStyle: PROPERTIES_ENUM.SIZEBY_FONT_STYLE,
        fontSize: PROPERTIES_ENUM.SIZEBY_FONT_SIZE,
        fontColor: PROPERTIES_ENUM.SIZEBY_FONT_COLOR,
      },
      displayOptions: ["nameSelect", "style", "sizeAndColor"],
    },
  ],
};

const legendConfig = {
  // Only show if not ring or pie
  tagName: 'HideableLayout',
  title: mstrmojo.descP("<%= pluginName %>.", "14", "Show Legend"),
  className: 'hideable-layout',
  withSwitch: true,
  key: PROPERTIES_ENUM.SHOW_LEGEND,
  children: [
    {
      tagName: "FontConfig",
      keyIDs: {
        fontName: PROPERTIES_ENUM.LEGEND_FONT_FAMILY,
        fontStyle: PROPERTIES_ENUM.LEGEND_FONT_STYLE,
        fontSize: PROPERTIES_ENUM.LEGEND_FONT_SIZE,
        fontColor: PROPERTIES_ENUM.LEGEND_FONT_COLOR,
      },
      displayOptions: ["nameSelect", "style", "sizeAndColor"],
    },
  ],
}

const textAndFormConfig = {
  tagName: "VerticalLayout",
  children: [
    emptyVizWarningMessage,
    {
      tagName: "VerticalLayout",
      key: PROPERTIES_ENUM.VIZ_SECOND_TAB_SECTION,
      children: [attributeConfig, metricConfig, legendConfig],
    },
  ],
};

export default textAndFormConfig;