@hisptz/react-ui/build/cjs/components/Map/Map.stories.js

A collection of reusable complex DHIS2 react ui components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PointLayer = exports.GoogleEarthEngineLayers = exports.Controls = exports.ChoroplethThematicLayerWithLevels = exports.ChoroplethThematicLayer = exports.BubbleThematicLayer = exports.BoundaryLayerWithLevels = exports.BoundaryLayer = exports.BaseMap = exports.AllThematicLayers = void 0;

var _react = _interopRequireDefault(require("react"));

var _index = _interopRequireDefault(require("./index"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);

const BaseMap = Template.bind({});
exports.BaseMap = BaseMap;
BaseMap.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: true
  }
};
const Controls = Template.bind({});
exports.Controls = Controls;
Controls.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: true
  },
  controls: [{
    type: "print",
    position: "topleft",
    options: {
      hidden: false,
      hideControlContainer: true,
      sizeModes: ["A4Landscape", "A4Portrait", "Current"]
    }
  }]
};
const BoundaryLayer = Template.bind({});
exports.BoundaryLayer = BoundaryLayer;
BoundaryLayer.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: true
  },
  boundaryLayer: {
    enabled: true
  }
};
const BoundaryLayerWithLevels = Template.bind({});
exports.BoundaryLayerWithLevels = BoundaryLayerWithLevels;
BoundaryLayerWithLevels.args = {
  orgUnitSelection: {
    orgUnits: [{
      id: "ImspTQPwCqd",
      displayName: "Sierra Leone",
      name: "Sierra Leone",
      path: "/ImspTQPwCqd",
      children: []
    }],
    levels: ["2"]
  },
  boundaryLayer: {
    enabled: true
  }
};
const ChoroplethThematicLayer = Template.bind({});
exports.ChoroplethThematicLayer = ChoroplethThematicLayer;
ChoroplethThematicLayer.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: false
  },
  boundaryLayer: {
    enabled: true
  },
  thematicLayers: [{
    type: "choropleth",
    id: "choropleth",
    enabled: true,
    dataItem: {
      id: "Uvn6LCg7dVU",
      displayName: "ANC 1 Coverage",
      type: "indicator"
    },
    control: {
      enabled: true,
      position: "topright"
    }
  }],
  periodSelection: {
    periods: ["2022"]
  },
  legends: {
    enabled: true,
    position: "topright",
    collapsible: true
  }
};
const BubbleThematicLayer = Template.bind({});
exports.BubbleThematicLayer = BubbleThematicLayer;
BubbleThematicLayer.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: true
  },
  boundaryLayer: {
    enabled: true
  },
  thematicLayers: [{
    type: "bubble",
    id: "bubble",
    enabled: true,
    dataItem: {
      id: "Uvn6LCg7dVU",
      displayName: "ANC 1 Coverage",
      type: "indicator"
    },
    control: {
      enabled: true,
      position: "topright"
    },
    radius: {
      min: 0,
      max: 40
    }
  }],
  legends: {
    enabled: true,
    position: "topright",
    collapsible: true
  },
  periodSelection: {
    periods: ["2022"]
  },
  controls: [{
    type: "fullscreen",
    position: "topleft"
  }]
};
const AllThematicLayers = Template.bind({});
exports.AllThematicLayers = AllThematicLayers;
AllThematicLayers.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: true
  },
  boundaryLayer: {
    enabled: true
  },
  thematicLayers: [{
    type: "choropleth",
    id: "ReUHfIn0pTQ",
    enabled: true,
    dataItem: {
      id: "ReUHfIn0pTQ",
      displayName: "ANC 1-3 Dropout Rate",
      type: "indicator",
      legendSet: "fqs276KXCXi"
    },
    control: {
      enabled: true,
      position: "topright"
    }
  }, {
    type: "choropleth",
    id: "Uvn6LCg7dVU",
    enabled: true,
    dataItem: {
      id: "Uvn6LCg7dVU",
      displayName: "ANC 1 Coverage",
      type: "indicator"
    },
    control: {
      enabled: true,
      position: "topright"
    }
  }],
  legends: {
    enabled: true,
    position: "topright",
    collapsible: true
  },
  periodSelection: {
    periods: ["2022"]
  },
  controls: [{
    type: "scale",
    position: "bottomleft",
    options: {
      imperial: false,
      metric: true
    }
  }, {
    type: "fullscreen",
    position: "bottomleft"
  }]
};
const ChoroplethThematicLayerWithLevels = Template.bind({});
exports.ChoroplethThematicLayerWithLevels = ChoroplethThematicLayerWithLevels;
ChoroplethThematicLayerWithLevels.args = {
  orgUnitSelection: {
    orgUnits: [{
      id: "ImspTQPwCqd",
      displayName: "Sierra Leone",
      name: "Sierra Leone",
      path: "/ImspTQPwCqd",
      children: []
    }],
    levels: ["3"]
  },
  boundaryLayer: {
    enabled: true
  },
  thematicLayers: [{
    type: "choropleth",
    id: "choropleth",
    enabled: true,
    dataItem: {
      id: "Uvn6LCg7dVU",
      displayName: "ANC 1 Coverage",
      type: "indicator"
    },
    control: {
      enabled: true,
      position: "topright"
    }
  }],
  legends: {
    enabled: true,
    position: "topright",
    collapsible: true
  },
  periodSelection: {
    periods: ["2022"]
  },
  controls: [{
    type: "print",
    position: "topleft",
    options: {
      hidden: false,
      hideControlContainer: true,
      sizeModes: ["A4Landscape", "A4Portrait", "Current"]
    }
  }]
};
const PointLayer = Template.bind({});
exports.PointLayer = PointLayer;
PointLayer.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: false
  },
  thematicLayers: [{
    type: "choropleth",
    id: "choropleth",
    enabled: true,
    dataItem: {
      id: "Uvn6LCg7dVU",
      displayName: "ANC 1 Coverage",
      type: "indicator"
    },
    control: {
      enabled: true,
      position: "topright"
    }
  }],
  periodSelection: {
    periods: ["2022"]
  },
  pointLayer: {
    enabled: true,
    label: "Facilities",
    level: "m9lBJogzE95",
    style: {
      groupSet: "J5jldMd8OHv"
    }
  }
};
const GoogleEarthEngineLayers = Template.bind({});
exports.GoogleEarthEngineLayers = GoogleEarthEngineLayers;
GoogleEarthEngineLayers.args = {
  orgUnitSelection: {
    orgUnits: [],
    userOrgUnit: true,
    userSubUnit: true,
    userSubX2Unit: false
  },
  thematicLayers: [],
  periodSelection: {
    periods: ["2022"]
  },
  earthEngineLayers: [{
    name: "Population",
    type: "population",
    id: "population",
    enabled: false,
    params: {
      min: 0,
      max: 10,
      palette: "#f7fbff,#deebf7,#c6dbef,#9ecae1,#6baed6,#4292c6,#2171b5,#08519c,#08306b"
    },
    aggregations: ["sum", "mean"],
    filters: {
      period: "2020"
    }
  }, {
    name: "Footprints",
    type: "footprints",
    id: "footprints",
    aggregations: ["count"],
    enabled: false
  }, {
    name: "Land Cover",
    type: "landCover",
    id: "landCover",
    enabled: true,
    aggregations: ["percentage"]
  }],
  pointLayer: {
    enabled: false,
    label: "Facilities",
    level: "m9lBJogzE95",
    style: {
      groupSet: "J5jldMd8OHv"
    }
  }
};
var _default = {
  title: "Components/Map",
  component: _index.default,
  decorators: [MapStory => {
    return /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: "100%",
        height: "100%"
      }
    }, /*#__PURE__*/_react.default.createElement(MapStory, null));
  }]
};
exports.default = _default;