@icij/murmur-next 4.0.0 → 4.0.1

package/stories/murmur/decorators.ts

@@ -1,108 +0,0 @@
-import {BModal, BPopover, useModal} from "bootstrap-vue-next";
-import {Size} from "@/enums";
-import {toRefs} from "vue";
-import {geoOrthographic} from "d3-geo";
-import {defineComponent} from "vue";
-import {ChoroplethMap} from "@/maps";
-
-export default defineComponent({
-  components: {ChoroplethMap}
-})
-
-
-export const modalDecorator = (buttonLabel:string="Click to see the form",modalTitle:string|null,size:Size=Size.md) => ({
-  components: {BModal},
-  setup() {
-    const {show} = useModal('formModal')
-    return {show,buttonLabel,modalTitle,size};
-  },
-  template: `
-    <div class="p-4 text-center">
-      <button class="btn btn-info fw-bold" @click="show">
-        {{buttonLabel}}
-      </button>
-    </div>
-    <b-modal hide-footer lazy :title="modalTitle" id="formModal" :size="size" no-headings>
-      <story/>
-    </b-modal>`
-})
-
-
-export const popoverDecorator = () => ({
-  components: { BPopover },
-  template:`<div>
-        <div class="p-4 text-center">
-            <button class="btn btn-info fw-bold" id="popover-button-sample">
-                Click to see the form
-            </button>
-        </div>
-        <b-popover target="popover-button-sample" placement="right" >
-            <story id="popover-button-sample"/>
-        </b-popover>
-    </div>`
-})
-
-export const toggleDecorator = (_storyFn:any,context:any) => ({
-  setup() {
-    const { active } = toRefs( context.args)
-    function onClick(){
-      active.value = !active.value
-    }
-    return {onClick}
-  },
-  template:`
-    <div class="card card-xs mx-auto m-4" >
-      <story />
-      <div class="card-footer text-center">
-        <button @click="onClick" type="button" class="btn btn-info">
-          Click to toggle 
-        </button>
-      </div>
-    </div>`
-})
-
-
-export const bgStripedDecorator = () => ({ template: '<div class="p-2 bg-striped"><story/></div>' })
-export const leakSizeDecorator = () => ({
-  template: `
-  <h4>Leaks size</h4>
-  <p class="text-muted">
-    Size of each ICIJ's leak.
-  </p>
-  <story/>
-  <p class="text-muted small">
-    Source: ICIJ. 
-  </p>`
-})
-
-export const icijOfficesDecorator = ()=>({
- template:`
-    <h4>ICIJ Offices</h4>
-    <p class="mb-4">A non-exhaustive list of ICIJ offices and operations.</p>
-    <story/>
- `
-})
-export const choroplethDecorator = (fn,ctx)=>({
-  components:[ChoroplethMap],
-  decorators:[icijOfficesDecorator],
-  setup(){
-    const props = {
-      color:"#faa",
-      outlineColor:"#000",
-      graticuleColor:"#eee",
-      graticule:true ,
-      outline:true ,
-      hideLegend:true ,
-      zoomable:true ,
-      spherical:true,
-      zoomMin:0.9,
-      projection:geoOrthographic
-    }
-    return {props}
-  },
-  template:`
-  <choropleth-map v-bind="props"  >
-   <story/>
-  </choropleth-map>
-  `
-})

package/stories/murmur/maps/ChoroplethMap.stories.ts

@@ -1,440 +0,0 @@
-import { ChoroplethMap,ChoroplethMapAnnotation } from "@/maps";
-import { StoryObj } from "@storybook/vue3";
-import { scaleThreshold } from 'd3'
-import { geoOrthographic } from 'd3-geo'
-const motorVehiclesPer1000people= {
-  "MCO": 899,
-  "USA": 797,
-  "LIE": 750,
-  "ISL": 745,
-  "LUX": 739,
-  "AUS": 717,
-  "NZL": 712,
-  "MLT": 693,
-  "ITA": 679,
-  "GUM": 677,
-  "PRI": 635,
-  "GRC": 624,
-  "FIN": 612,
-  "CAN": 607,
-  "ESP": 593,
-  "JPN": 591,
-  "NOR": 584,
-  "FRA": 578,
-  "AUT": 578,
-  "DEU": 572,
-  "SVN": 567,
-  "CHE": 566,
-  "LTU": 560,
-  "BEL": 559,
-  "PRT": 548,
-  "BHR": 537,
-  "POL": 537,
-  "QAT": 532,
-  "CYP": 532,
-  "NLD": 528,
-  "KWT": 527,
-  "SWE": 520,
-  "GBR": 519,
-  "IRL": 513,
-  "BRN": 510,
-  "CZE": 485,
-  "DNK": 480,
-  "EST": 476,
-  "BRB": 469,
-  "LBN": 434,
-  "BGR": 393,
-  "HRV": 380,
-  "KOR": 376,
-  "SVK": 364,
-  "BLR": 362,
-  "MYS": 361,
-  "TTO": 353,
-  "ISR": 346,
-  "HUN": 345,
-  "SAU": 336,
-  "TWN": 324,
-  "LVA": 319,
-  "ARG": 314,
-  "ARE": 313,
-  "MNE": 309,
-  "RUS": 293,
-  "SUR": 291,
-  "LBY": 290,
-  "MEX": 275,
-  "BRA": 249,
-  "SRB": 238,
-  "ROU": 235,
-  "ATG": 230,
-  "KNA": 223,
-  "KAZ": 219,
-  "OMN": 215,
-  "BIH": 214,
-  "THA": 206,
-  "VCT": 204,
-  "IRN": 200,
-  "URY": 200,
-  "JAM": 188,
-  "CHL": 184,
-  "FJI": 179,
-  "CRI": 177,
-  "SYC": 176,
-  "MUS": 175,
-  "BLZ": 174,
-  "TON": 174,
-  "UKR": 173,
-  "LCA": 166,
-  "JOR": 165,
-  "ZAF": 165,
-  "DMA": 163,
-  "NRU": 159,
-  "MDA": 156,
-  "GEO": 155,
-  "MKD": 155,
-  "SGP": 149,
-  "VEN": 147,
-  "KIR": 146,
-  "TUR": 144,
-  "BWA": 133,
-  "PAN": 132,
-  "DOM": 128,
-  "TUN": 125,
-  "ALB": 124,
-  "GRD": 122,
-  "ZWE": 114,
-  "DZA": 114,
-  "NAM": 107,
-  "TKM": 106,
-  "ARM": 103,
-  "CPV": 101,
-  "AZE": 101,
-  "GUY": 95,
-  "HND": 95,
-  "SLV": 94,
-  "SWZ": 89,
-  "CHN": 83,
-  "BHS": 81,
-  "HKG": 77,
-  "WSM": 77,
-  "LKA": 76,
-  "SYR": 73,
-  "PER": 73,
-  "MNG": 72,
-  "ECU": 71,
-  "COL": 71,
-  "MAR": 70,
-  "BOL": 68,
-  "GTM": 68,
-  "IDN": 60,
-  "KGZ": 59,
-  "NIC": 57,
-  "BTN": 57,
-  "VUT": 54,
-  "PRY": 54,
-  "IRQ": 50,
-  "EGY": 45,
-  "PSE": 42,
-  "TJK": 38,
-  "CUB": 38,
-  "AGO": 38,
-  "UZB": 37,
-  "FSM": 37,
-  "YEM": 35,
-  "GNB": 33,
-  "COM": 33,
-  "NGA": 31,
-  "PHL": 30,
-  "GHA": 30,
-  "AFG": 28,
-  "MDV": 28,
-  "DJI": 28,
-  "COG": 27,
-  "SDN": 27,
-  "MDG": 26,
-  "KEN": 24,
-  "VNM": 23,
-  "SEN": 22,
-  "BEN": 22,
-  "KHM": 21,
-  "ZMB": 21,
-  "LAO": 20,
-  "CIB": 20,
-  "PAK": 18,
-  "IND": 18,
-  "CMR": 14,
-  "GAB": 14,
-  "MLI": 14,
-  "PNG": 13,
-  "GNQ": 13,
-  "BFA": 12,
-  "MOZ": 12,
-  "HTI": 12,
-  "ERI": 11,
-  "PRK": 11,
-  "MWI": 8,
-  "UGA": 8,
-  "TZA": 7,
-  "NER": 7,
-  "GMB": 7,
-  "MMR": 7,
-  "SLE": 6,
-  "TCD": 6,
-  "BDI": 6,
-  "GIN": 5,
-  "RWA": 5,
-  "NPL": 5,
-  "MRT": 5,
-  "COD": 5,
-  "CAF": 4,
-  "LSA": 4,
-  "ETH": 3,
-  "LBR": 3,
-  "BGD": 3,
-  "SLB": 3,
-  "SOM": 3,
-  "TGO": 2
-}
-const wineStockByDepartment= {
-  "01": 10155,
-  "02": 686,
-  "03": 851,
-  "04": 1786,
-  "05": 225,
-  "06": 66,
-  "07": 21156,
-  "08": 165,
-  "09": 0,
-  "10": 7731,
-  "11": 207334,
-  "12": 0,
-  "13": 1699268,
-  "14": 325321,
-  "15": 4002,
-  "16": 11038,
-  "17": 493,
-  "18": 2712,
-  "19": 29,
-  "2A": 0,
-  "2B": 22518,
-  "21": 147630,
-  "22": 170,
-  "23": 0,
-  "24": 40713,
-  "25": 0,
-  "26": 1115,
-  "27": 410,
-  "28": 0,
-  "29": 0,
-  "30": 168319,
-  "31": 14023,
-  "32": 23450,
-  "33": 2416742,
-  "34": 856268,
-  "35": 9899,
-  "36": 267,
-  "37": 7179,
-  "38": 68,
-  "39": 17025,
-  "40": 986,
-  "41": 53451,
-  "42": 8154,
-  "43": 1576,
-  "44": 120456,
-  "45": 4569,
-  "46": 15274,
-  "47": 1061,
-  "48": 62,
-  "49": 48127,
-  "50": 0,
-  "51": 146309,
-  "52": 506,
-  "53": 906,
-  "54": 0,
-  "55": 0,
-  "56": 0,
-  "57": 642,
-  "58": 960,
-  "59": 3355,
-  "60": 424,
-  "61": 44,
-  "62": 101972,
-  "63": 1001,
-  "64": 8380,
-  "65": 0,
-  "66": 80076,
-  "67": 219631,
-  "68": 6173,
-  "69": 232683,
-  "70": 0,
-  "71": 431251,
-  "72": 23,
-  "73": 1,
-  "74": 29,
-  "75": 1486,
-  "76": 26255,
-  "77": 118021,
-  "78": 74781,
-  "79": 103690,
-  "80": 413,
-  "81": 7780,
-  "82": 31273,
-  "83": 160518,
-  "84": 218890,
-  "85": 0,
-  "86": 3688,
-  "87": 803,
-  "88": 0,
-  "89": 26907,
-  "90": 0,
-  "91": 8749,
-  "92": 11208,
-  "93": 4595,
-  "94": 13394,
-  "95": 840
-}
-function featureColorScale () {
-  const scale = scaleThreshold()
-    .domain([100, 300, 700])
-    .range(["#ffffcc","#c2e699","#78c679", "#238443"]);
-  return scale
-}
-export default {
-    title: 'Murmur/maps/ChoroplethMap',
-    component: ChoroplethMap,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof ChoroplethMap>;
-const Template: Story = (args: any) => ({
-    components: { ChoroplethMap },
-    setup() {
-        return { args };
-    },
-    template: `<ChoroplethMap v-bind="args" />`
-});
-
-export const Default = Template.bind({});
-Default.args = {
-    data:motorVehiclesPer1000people
-};
-export const hatchEmpty = Template.bind({});
-hatchEmpty.args = {
-  data:motorVehiclesPer1000people,
-  hatchEmpty:true
-};
-export const Zoomable = Template.bind({});
-Zoomable.args = {
-  data:motorVehiclesPer1000people,
-  hatchEmpty:true,
-  zoomable:true
-};
-export const FeatureColorScale = Template.bind({});
-FeatureColorScale.args = {
-  data:motorVehiclesPer1000people,
-  featureColorScale:featureColorScale()
-};
-
-export const Topojson = Template.bind({});
-Topojson.args = {
-  data:wineStockByDepartment,
-  clickable:true,
-  zoomable:true,
-  topojsonUrl:"./assets/topojson/france-departments.json",
-  topojsonObjects:"departements",
-  topojsonObjectsPath:"properties.code",
-};
-const TemplateLegend: Story = (args: any) => ({
-  components: { ChoroplethMap },
-  setup() {
-    return { args };
-  },
-  template: `
-    <choropleth-map v-bind="args">
-      <template #legend-cursor="{ value, identifier }">
-        <div class="bg-dark text-light px-2 py-1 text-nowrap">
-          <span>{{value.toLocaleString()}} hl</span>
-        </div>
-      </template>
- 
-    </choropleth-map>`
-});
-export const TopojsonLegend = TemplateLegend.bind({});
-TopojsonLegend.args = {
-  data:wineStockByDepartment,
-  clickable:true,
-  zoomable:true,
-  topojsonUrl:"./assets/topojson/france-departments.json",
-  topojsonObjects:"departements",
-  topojsonObjectsPath:"properties.code"
-};
-const TemplateAnnotation: Story = (args: any) => ({
-  components: { ChoroplethMap ,ChoroplethMapAnnotation},
-  setup() {
-    const annotation={
-      latitude: 44.836151,
-      longitude:  -0.580816,
-      placement:"righttop",
-      class:"text-center",
-    }
-    return { args,annotation };
-  },
-  template: `
-    <choropleth-map v-bind="args">
-      <template #legend-cursor="{ value, identifier }">
-        <div class="bg-dark text-light px-2 py-1 text-nowrap">
-          <span>{{value.toLocaleString()}} hl</span>
-        </div>
-      </template>
-      <choropleth-map-annotation v-bind="annotation">
-        Bordeaux<br /><img src="/assets/img/arrow-bottom.svg" width="16px" />
-      </choropleth-map-annotation>
-    </choropleth-map>`
-});
-export const TopojsonAnnotation = TemplateAnnotation.bind({});
-TopojsonAnnotation.args = {
-  data:wineStockByDepartment,
-  clickable:true,
-  zoomable:true,
-  topojsonUrl:"./assets/topojson/france-departments.json",
-  topojsonObjects:"departements",
-  topojsonObjectsPath:"properties.code",
-
-};
-const TemplateCustomProjection: Story = (args: any) => ({
-  components: { ChoroplethMap ,ChoroplethMapAnnotation},
-  setup() {
-    const annotation={
-      class:"text-center",
-      height:15,
-      latitude:35.167406,
-      longitude:33.435499,
-      width:15,
-      dropShadow:"none",
-      scale:true
-  }
-    return { args,annotation };
-  },
-  template: `
-    <choropleth-map v-bind="args">
-      <choropleth-map-annotation v-bind="annotation">
-        <div class="border border-warning" style="height: 15px; width: 15px"></div>
-      </choropleth-map-annotation>
-    </choropleth-map>`
-});
-
-export const CustomProjection = TemplateCustomProjection.bind({})
-CustomProjection.args = {
-  center:[33.435499, 35.167406],
-  projection:geoOrthographic,
-  zoomMin:0.9,
-  color:"#aaf",
-  outlineColor:"#fff",
-  graticuleColor:"#333",
-  graticule:true,
-  hideLegend:true,
-  outline:true ,
-  spherical:true,
-  zoomable:true
-};

package/stories/murmur/maps/ChoroplethMapAnnotation.stories.ts

@@ -1,26 +0,0 @@
-import { ChoroplethMapAnnotation } from "@/maps";
-import { StoryObj } from "@storybook/vue3";
-
-export default {
-    title: 'Murmur/maps/ChoroplethMapAnnotation',
-    component: ChoroplethMapAnnotation,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof ChoroplethMapAnnotation>;
-const Template: Story = (args: any) => ({
-    components: { ChoroplethMapAnnotation },
-    setup() {
-        return { args };
-    },
-    template: `<ChoroplethMapAnnotation v-bind="args" />`
-});
-
-
-
-export const Default = Template.bind({});
-Default.args = {
-
-};

package/stories/murmur/maps/SymbolMap.stories.ts

@@ -1,24 +0,0 @@
-import { SymbolMap } from "@/maps";
-import { StoryObj } from "@storybook/vue3";
-
-export default {
-    title: 'Murmur/maps/SymbolMap',
-    component: SymbolMap,
-    tags: ['autodocs'],
-    argTypes: {
-    }
-};
-
-type Story = StoryObj<typeof SymbolMap>;
-const Template: Story = (args: any) => ({
-    components: { SymbolMap },
-    setup() {
-        return { args };
-    },
-    template: `<SymbolMap v-bind="args" />`
-});
-
-export const Default = Template.bind({});
-Default.args = {
-
-};

package/stories/murmur/utils.ts

@@ -1,7 +0,0 @@
-export function humanReadableGb(size: number) {
-  if (size >= 1e3) {
-    return `${size / 1e3}TB`
-  } else {
-    return `${size}GB`
-  }
-}