basic-legend.ts

import {
  MapLegendClasses,
  MapLegendData,
  LegendMainHeading
} from './map-legends';

export const legendClasses: MapLegendClasses =
{
  legendTitleClass: "title-text",

  legendContainerClass: ['map-legend', 'card'],

  legendHeadingClass: 'heading-text',

  legendHeadingClass2: 'heading-text-2',

  legendItemClass: 'legend-item',

  legendSubTextClass: 'legend-sub-text'
};

const meterHeadingData: Array<LegendMainHeading> = [
  {
    title: 'Meters',
    headings: [
      {
        title: 'Meter',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgCircle',
          iconData: {
            cx: 5,
            cy: 5,
            r: 4,
            stroke: '#FF8800',
            strokeWidth: '1',
            fill: 'none'
          }
        },
        subText: 'Base Meter'
      },
      {
        title: 'Multiple Meters',
        item: {
          iconWidth: "11",
          iconHeight: "11",
          iconTemplateName: 'svgCircle',
          iconData: {
            cx: 5,
            cy: 5,
            r: 2,
            stroke: '#FF8800',
            strokeWidth: '2',
            fill: 'none'
          }
        },
        subText: '(same location)'
      },
      {
        title: 'Meter',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgCircle',
          iconData: {
            cx: 5,
            cy: 5,
            r: 4,
            fill: 'CCCCCC',
            stroke: 'none'
          }
        },
        subText: '(background)'
      }
    ]
  }
];

const transformerHeadingData: Array<LegendMainHeading> = [
  {
    title: 'Transformers',
    headings: [
      {
        title: 'Transformer',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgPolygon',
          iconData: {
            points: '0,10 5,0 10,10',
            stroke: 'none',
            fill: '#00C0FF'
          }
        }
      },
      {
        title: 'Transformer',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgPolygon',
          iconData: {
            points: '0,10 5,0 10,10',
            stroke: 'none',
            fill: '#cccccc'
          }
        }
      }
    ]
  }
];

const routerHeadingData: Array<LegendMainHeading> = [
  {
    title: 'Routers',
    headings: [
      {
        title: 'Router',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgRect',
          iconData: {
            width: 10,
            height: 10,
            stroke: 'none',
            fill: '#990099'
          }
        }
      },
      {
        title: 'Router',
        item: {
          iconWidth: "10",
          iconHeight: "10",
          iconTemplateName: 'svgRect',
          iconData: {
            width: 10,
            height: 10,
            stroke: 'none',
            fill: '#cccccc'
          }
        },
        subText: '(background)'
      }
    ]
  }
];

export const legendData: MapLegendData =
{
  legendTitle: 'Map Legend',

  legendClasses: legendClasses,

  headingData: [meterHeadingData],

  headingData2: [
    transformerHeadingData,
    routerHeadingData
  ]
};