@icij/murmur-next 4.0.0

package/docs/pages/maps/choropleth-map-annotation/doc.md

@@ -0,0 +1,373 @@
+---
+title: Choropleth Annotation
+---
+
+This component must be used as child of a `ChoroplethMap` component.
+You can use them with complex layout, including spherical projections:
+
+:::sample-card
+<div class="bg-light p-4">
+  <h4>ICIJ Offices</h4>
+  <p class="mb-4">A non-exhaustive list of ICIJ offices and opperations.</p>
+  <choropleth-map 
+    color="#faa" 
+    outline-color="#000" 
+    graticule-color="#eee" 
+    graticule outline hide-legend zoomable spherical 
+    :zoom-min="0.9" 
+    :projection="geoOrthographic"
+  >
+    <choropleth-map-annotation :latitude="38.9072" :longitude="-77.0369" placement="top">
+      <p class="small mb-2">Washington DC. (Headquarter)</p>
+    </choropleth-map-annotation>
+    <choropleth-map-annotation v-for="(office, o) in offices" :latitude="office.latitude" :longitude="office.longitude" :key="o">
+      <span :title="office.label">●</span>
+    </choropleth-map-annotation>
+  </choropleth-map>
+</div>
+:::
+
+And combine annotation with different placements:
+
+:::sample-card
+<div class="bg-light p-4">
+  <h4>Paris public swimming pools</h4>
+  <p class="mb-4">Only 6 are olympic-size swimming pool (50m).</p>
+  <choropleth-map
+    :data="swimmingPoolsByArrondissement"
+    :feature-color-scale="swimmingPoolsColorScale" 
+    topojson-url="./assets/topojson/paris-arrondissements.json"
+    topojson-objects="arrondissements"
+    topojson-objects-path="properties.ar"
+  >
+    <choropleth-map-annotation v-for="pool in swimmingPools" :latitude="pool.latitude" :longitude="pool.longitude">
+      <span :title="pool.name">●</span>
+    </choropleth-map-annotation>
+    <choropleth-map-annotation v-for="pool in swimmingPools50m" :latitude="pool.latitude" :longitude="pool.longitude" placement="topright">
+      <div class="pl-1 small center">
+        {{ pool.name.replace('Piscine', '') }}<br />
+        <img src="/assets/img/arrow-bottom.svg" height="24px" />
+      </div>
+    </choropleth-map-annotation>
+  </choropleth-map>
+</div>
+:::
+
+
+::: api-table maps/ChoroplethMapAnnotation.vue :::
+
+<script>
+import { scaleSequential } from 'd3'
+import { iteratee } from 'lodash'
+import { geoOrthographic } from 'd3-geo'
+
+export default {
+  computed: {
+    swimmingPools50m() {
+      return this.swimmingPools.filter(iteratee('m50'))
+    }
+  },
+  data () {
+    return {
+      geoOrthographic,
+      offices: [
+        { latitude: 48.859116, longitude: 2.331839, label: 'Paris, France' },
+        { latitude: 25.766368, longitude: -80.210268, label: 'Miami, FL, USA' },
+        { latitude: 40.429913, longitude: -3.669245, label: 'Madrid, Spain' },
+        { latitude: 35.128683, longitude: -106.579128, label: 'Alburquerque, USA' },
+        { latitude: 44.80401, longitude: 20.46513, label: 'Belgrade, Serbia' },
+        { latitude: 53.33928, longitude: -6.281314, label: 'Dublin, Ireland' },
+        { latitude: -34.035875, longitude: 151.194191, label: 'Sydney, Australia' },
+        { latitude: 38.9072, longitude: -77.0369, label: 'Washington DC, USA' }
+      ],
+      swimmingPoolsColorScale: scaleSequential([0, 7], ["#fff","#00f"]),
+      swimmingPoolsByArrondissement: {
+        '1':	1,
+        '4':	1,
+        '5':	1,
+        '6':	1,
+        '8':	1,
+        '9':	2,
+        '10':	1,
+        '11':	2,
+        '12':	2,
+        '13':	4,
+        '14':	3,
+        '15':	7,
+        '16':	1,
+        '17':	1,
+        '18':	2,
+        '19':	4,
+        '20':	3
+      },
+      swimmingPools: [
+        {
+          name: "Piscine Henry de Montherlant",
+          address: "30, boulevard Lannes",
+          ar: 16,
+          latitude: 48.86729079,
+          longitude: 2.271528354
+        },
+        {
+          name: "Piscine Jean Taris",
+          address: "16 rue Thouin",
+          ar: 5,
+          latitude: 48.84476225,
+          longitude: 2.347867188
+        },
+        {
+          name: "Piscine La Plaine",
+          address: "13, rue du Général Guillaumat",
+          ar: 15,
+          latitude: 48.82768771,
+          longitude: 2.293599716
+        },
+        {
+          name: "Piscine Saint-Merri / Marie-Marvingt",
+          address: "16 rue du renard",
+          ar: 4,
+          latitude: 48.85905965,
+          longitude: 2.352828178
+        },
+        {
+          name: "Piscine René et André Mourlon",
+          address: "19, rue Gaston de Caillavet",
+          ar: 15,
+          latitude: 48.84873751,
+          longitude: 2.284806858
+        },
+        {
+          name: "Piscine Georges Hermant",
+          m50: true,
+          address: "8-10, rue David d Angers",
+          ar: 19,
+          latitude: 48.88236232,
+          longitude: 2.389479392
+        },
+        {
+          name: "Piscine Champerret",
+          address: "36, boulevard de Reims",
+          ar: 17,
+          latitude: 48.888621,
+          longitude: 2.295487774
+        },
+        {
+          name: "Piscine Alfred Nakache",
+          address: "4-12 rue Dénoyez",
+          ar: 20,
+          latitude: 48.87148306,
+          longitude: 2.378677041
+        },
+        {
+          name: "Piscine Rouvet",
+          address: "1, rue Rouvet",
+          ar: 19,
+          latitude: 48.89308109,
+          longitude: 2.384807396
+        },
+        {
+          name: "Aquaboulevard",
+          address: "4-6 Rue Louis Armand",
+          ar: 15,
+          latitude: 48.8318967,
+          longitude: 2.276134007
+        },
+        {
+          name: "Piscine Elisabeth",
+          address: "1, place Edith Thomas",
+          ar: 14,
+          latitude: 48.82159805,
+          longitude: 2.325900875
+        },
+        {
+          name: "Piscine Roger Le Gall",
+          m50: true,
+          address: "34, boulevard Carnot",
+          ar: 12,
+          latitude: 48.84165419,
+          longitude: 2.412576407
+        },
+        {
+          name: "Piscine Georges Rigal",
+          address: "115, boulevard de Charonne",
+          ar: 11,
+          latitude: 48.85659972,
+          longitude: 2.39349913
+        },
+        {
+          name: "Piscine Saint-Germain",
+          address: "12, rue Lobineau",
+          ar: 6,
+          latitude: 48.85182487,
+          longitude: 2.335852224
+        },
+        {
+          name: "Piscine de la Cour des Lions",
+          address: "9, rue Alphonse Baudin",
+          ar: 11,
+          latitude: 48.86062504,
+          longitude: 2.37024622
+        },
+        {
+          name: "Piscine Georges Drigny",
+          address: "18, rue Bochart de Saron",
+          ar: 9,
+          latitude: 48.88203482,
+          longitude: 2.342221979
+        },
+        {
+          name: "Piscine de la Butte aux Cailles",
+          address: "5, place Paul Verlaine",
+          ar: 13,
+          latitude: 48.82691355,
+          longitude: 2.352891856
+        },
+        {
+          name: "Piscine Yvonne Godard",
+          address: "7 rue Serpollet",
+          ar: 20,
+          latitude: 48.8607863,
+          longitude: 2.410606682
+        },
+        {
+          name: "Piscine Hébert",
+          address: "2, rue des Fillettes",
+          ar: 18,
+          latitude: 48.89396858,
+          longitude: 2.363212372
+        },
+        {
+          name: "Piscine Suzanne Berlioux",
+          m50: true,
+          address: "Forum des Halles",
+          ar: 1,
+          latitude: 48.86179397,
+          longitude: 2.347164561
+        },
+        {
+          name: "Piscine Aspirant Dunand",
+          address: "20 Rue Saillard",
+          ar: 14,
+          latitude: 48.83182186,
+          longitude: 2.326198443
+        },
+        {
+          name: "Piscine Blomet",
+          m50: true,
+          address: "17, rue Blomet",
+          ar: 15,
+          latitude: 48.84330516,
+          longitude: 2.307503743
+        },
+        {
+          name: "Piscine Paul Valeyre",
+          address: "24, rue Marguerite de Rochechouart",
+          ar: 9,
+          latitude: 48.87796727,
+          longitude: 2.345021514
+        },
+        {
+          name: "Piscine Georges-Vallerey",
+          m50: true,
+          address: "148, avenue Gambetta",
+          ar: 20,
+          latitude: 48.87548869,
+          longitude: 2.406729763
+        },
+        {
+          name: "Piscine Jacqueline Auriol",
+          address: "7 Allée Louis de Funès",
+          ar: 8,
+          latitude: 48.87630719,
+          longitude: 2.305894617
+        },
+        {
+          name: "Piscine Armand Massard",
+          address: "66 boulevard du Montparnasse",
+          ar: 15,
+          latitude: 48.84333328,
+          longitude: 2.32336209
+        },
+        {
+          name: "Piscine Catherine Lagatu",
+          address: "155 avenue Parmentier",
+          ar: 10,
+          latitude: 48.87170298,
+          longitude: 2.369271523
+        },
+        {
+          name: "Piscine des Amiraux",
+          address: "6, rue Hermann Lachapelle",
+          ar: 18,
+          latitude: 48.89435943,
+          longitude: 2.351003515
+        },
+        {
+          name: "Piscine Dunois",
+          address: "70, rue Dunois",
+          ar: 13,
+          latitude: 48.83317033,
+          longitude: 2.366278589
+        },
+        {
+          name: "Piscine Emile Anthoine",
+          address: "9, rue Jean Rey",
+          ar: 15,
+          latitude: 48.85569513,
+          longitude: 2.290701301
+        },
+        {
+          name: "Piscine Mathis",
+          address: "15, rue Mathis",
+          ar: 19,
+          latitude: 48.8907392,
+          longitude: 2.375062338
+        },
+        {
+          name: "Piscine Edouard Pailleron",
+          address: "32, rue Edouard Pailleron",
+          ar: 19,
+          latitude: 48.88051842,
+          longitude: 2.377708927
+        },
+        {
+          name: "Piscine Joséphine-Baker",
+          address: "quai François Mauriac",
+          ar: 13,
+          latitude: 48.83606521,
+          longitude: 2.376165739
+        },
+        {
+          name: "Piscine Château des Rentiers",
+          address: "184, rue du Château des Rentiers",
+          ar: 13,
+          latitude: 48.83070607,
+          longitude: 2.363046188
+        },
+        {
+          name: "Piscine Keller",
+          m50: true,
+          address: "14 Rue de l'Ingénieur Robert Keller",
+          ar: 15,
+          latitude: 48.84738721,
+          longitude: 2.282124901
+        },
+        {
+          name: "Piscine Jean Boiteux ex Reuilly",
+          address: "13, rue Hénard",
+          ar: 12,
+          latitude: 48.84214721,
+          longitude: 2.389397786
+        },
+        {
+          name: "Piscine Didot",
+          address: "22, avenue Georges Lafenestre",
+          ar: 14,
+          latitude: 48.82484218,
+          longitude: 2.30975858
+        }
+      ]
+    }
+  }
+}
+</script>

package/docs/pages/maps/symbol-map/doc.md

@@ -0,0 +1,203 @@
+---
+title: Symbol
+badge: unstable
+---
+
+By default, `SymbolMap` builds a map of the world.
+
+:::sample-card
+<div class="bg-white p-4">
+  <h4>ICIJ Offices</h4>
+  <p class="mb-4">A non-exhaustive list of ICIJ offices and opperations.</p>
+  <symbol-map :data="icijOffices" horizontal-legend zoomable topojson-url="/assets/topojson/world-countries-sans-antarctica.json">
+    <template #tooltip="{ category, label }">
+      {{ label }} - {{ category }}
+    </template>
+  </symbol-map>
+  <p class="text-right">
+    <a href="#">
+      Source
+    </a>
+  </p>
+</div>
+:::
+
+All you have to do is to pass an array with coordinates:
+
+<collapsible-block label="Show the data structure" :json="icijOffices" />
+
+You can also create a more advanced map with custom marker size and custom colors in CSS:
+
+:::sample-card
+<div class="bg-white p-4">
+  <h4>Nuclear power plants in Europe</h4>
+  <symbol-map 
+    :data="powerPlants"
+    :marker-path="powerPlantMarkerPath"
+    :marker-width="powerPlantMarkerWidth"
+    category-objects-path="reactors"
+    class="power-plants-map"
+    fit-to-markers
+    horizontal-legend
+    tooltip-placement="rightbottom">
+    <template #tooltip="{ country, label, MWe }">
+      <div class="text-left p-1">
+        <h6>
+          {{ label }} ({{ country }})
+        </h6>
+        <strong class="h3">{{ MWe }} MWe</strong>
+      </div>
+    </template>
+    <template #legend-label="{ label }">
+      <span v-if="label === '1'">
+        1 reactor
+      </span>
+      <span v-else>
+       {{ label }} reactors
+      </span>
+    </template>
+  </symbol-map>
+  <p class="text-right">
+    <a href="https://pris.iaea.org/PRIS/">
+      Source
+    </a>
+  </p>
+</div>
+:::
+
+<collapsible-block label="Show the data structure" :json="powerPlants" />
+
+Just like the `ChoroplethMap`, the `SymbolMap` can use a different topoJSON to generate its base layer:
+
+:::sample-card
+<div class="bg-white p-4">
+  <h4>Sport facilities in Marseille</h4>
+  <p>Every sport facilities administrated by the city of Marseille.</p>
+  <symbol-map 
+    :marker-width="7"
+    class="marseille-facilities-map"
+    data="https://gist.githubusercontent.com/pirhoo/c42b180b774177bd9882899e009dddbe/raw/marseille-sport-facilities.json"
+    fit-to-markers
+    horizontal-legend
+    topojson-objects="collection"
+    topojson-url="https://gist.githubusercontent.com/pirhoo/a734b72bcf69f81f034b676e0aac4788/raw/marseille.topojson">
+    <template #tooltip="{ name }">
+      {{ name }}
+    </template>
+  </symbol-map>
+  <p class="text-right">
+    <a href="https://trouver.datasud.fr/dataset/marseille-equipements-sportifs">
+      Source
+    </a>
+  </p>
+</div>
+:::
+
+	
+<script>
+import * as d3 from 'd3'
+
+export default {	
+  computed: {
+    powerPlantMarkerWidth () {
+      const scale = d3.scaleLinear()
+        .domain(d3.extent(this.powerPlants, d => d.MWe))
+        .range([5, 20])
+      return d => scale(d.MWe)
+    },
+    powerPlantMarkerPath () {
+      return 'M 143.97,136.52 144,153 H 0 V 137 C 18.15,94.8 28.98,48.61 30,0 h 84 c 1.01,48.36 11.98,94.49 29.97,136.52 z'
+    }
+  },
+  data () {
+    return {
+      icijOffices: [
+        { latitude: 48.859116, longitude: 2.331839, category: 'Technology', label: 'Paris, France' },
+        { latitude: 25.766368, longitude: -80.210268, category: 'Technology', label: 'Miami, FL, USA' },
+        { latitude: 40.429913, longitude: -3.669245, category: 'Technology', label: 'Madrid, Spain' },
+        { color: '#aff05b', latitude: 35.128683, longitude: -106.579128, category: 'Data', label: 'Alburquerque, USA' },
+        { color: '#aff05b', latitude: 44.80401, longitude: 20.46513, category: 'Data', label: 'Belgrade, Serbia' },
+        { color: '#aff05b', latitude: 53.33928, longitude: -6.281314, category: 'Data', label: 'Dublin, Ireland' },
+        { latitude: -34.035875, longitude: 151.194191, category: 'Finance', label: 'Sydney, Australia' },
+        { latitude: 18.2076699, longitude: -67.1463184, category: 'Finance', label: 'Puerto Rico' },
+        { color: '#6e40aa', latitude: 38.9072, longitude: -77.0369, category: 'Editorial', label: 'Washington DC, USA' },
+        { color: '#6e40aa', latitude: 47.4808722, longitude: 18.8501225, category: 'Editorial', label: 'Budapest, Hungary' }
+      ],
+      powerPlants: [
+        { latitude: 53.85083, longitude: 9.34472, label: "Brokdorf", reactors: 1, MWe: 1410, country: "Germany" },
+        { latitude: 39.80806, longitude: -5.69694, label: "Almaraz", reactors: 2, MWe: 2017, country: "Spain" },
+        { latitude: 60.40333, longitude: 18.16667, label: "Forsmark", reactors: 3, MWe: 3138, country: "Sweden" },
+        { latitude: 45.25583, longitude: -0.69306, label: "Blayais", reactors: 4, MWe: 3640, country: "France" },
+        { latitude: 51.01528, longitude: 2.13611, label: "Gravelines", reactors: 6, MWe: 5460, country: "France" },
+        { latitude: 41.2, longitude: 0.56944, label: "Ascó", reactors: 2, MWe: 1992, country: "Spain" },
+        { latitude: 47.50972, longitude: 2.875, label: "Belleville", reactors: 2, MWe: 2620, country: "France" },
+        { latitude: 45.8, longitude: 5.27083, label: "Bugey", reactors: 4, MWe: 3580, country: "France" },
+        { latitude: 49.41583, longitude: 6.21806, label: "Cattenom", reactors: 4, MWe: 5200, country: "France" },
+        { latitude: 44.32222, longitude: 28.05722, label: "Cernavodă", reactors: 2, MWe: 1300, country: "Romania" },
+        { latitude: 47.23056, longitude: 0.17056, label: "Chinon", reactors: 4, MWe: 3620, country: "France" },
+        { latitude: 50.09, longitude: 4.78944, label: "Chooz", reactors: 2, MWe: 3000, country: "France" },
+        { latitude: 46.45667, longitude: 0.65278, label: "Civaux", reactors: 2, MWe: 2990, country: "France" },
+        { latitude: 39.21667, longitude: -1.05, label: "Cofrentes", reactors: 1, MWe: 1064, country: "Spain" },
+        { latitude: 44.63306, longitude: 4.75667, label: "Cruas", reactors: 4, MWe: 3660, country: "France" },
+        { latitude: 47.73306, longitude: 2.51667, label: "Dampierre", reactors: 4, MWe: 3560, country: "France" },
+        { latitude: 51.32472, longitude: 4.25861, label: "Doel", reactors: 4, MWe: 2911, country: "Belgium" },
+        { latitude: 49.085, longitude: 16.14889, label: "Dukovany", reactors: 4, MWe: 2040, country: "Czech Republic" },
+        { latitude: 50.91389, longitude: 0.96389, label: "Dungeness", reactors: 2, MWe: 1040, country: "United Kingdom" },
+        { latitude: 52.47417, longitude: 7.31778, label: "Emsland", reactors: 1, MWe: 1329, country: "Germany" },
+        { latitude: 47.90306, longitude: 7.56306, label: "Fessenheim", reactors: 2, MWe: 1760, country: "France" },
+        { latitude: 49.53639, longitude: -1.88167, label: "Flamanville", reactors: 2, MWe: 2660, country: "France" },
+        { latitude: 44.10667, longitude: 0.84528, label: "Golfech", reactors: 2, MWe: 2620, country: "France" },
+        { latitude: 52.03528, longitude: 9.41333, label: "Grohnde", reactors: 1, MWe: 1360, country: "Germany" },
+        { latitude: 48.51472, longitude: 10.40222, label: "Gundremmingen", reactors: 1, MWe: 1288, country: "Germany" },
+        { latitude: 54.635, longitude: -1.18083, label: "Hartlepool", reactors: 2, MWe: 1190, country: "United Kingdom" },
+        { latitude: 54.02889, longitude: -2.91611, label: "Heysham", reactors: 4, MWe: 2400, country: "United Kingdom" },
+        { latitude: 48.60556, longitude: 12.29306, label: "Isar", reactors: 2, MWe: 1410, country: "Germany" },
+        { latitude: 50.30139, longitude: 26.64972, label: "Khmelnitskiy", reactors: 2, MWe: 1900, country: "Ukraine" },
+        { latitude: 43.74611, longitude: 23.77056, label: "Kozloduy", reactors: 2, MWe: 1906, country: "Bulgaria" },
+        { latitude: 47.60306, longitude: 8.18472, label: "Leibstadt", reactors: 1, MWe: 1190, country: "Switzerland" },
+        { latitude: 43.43333, longitude: -2.8725, label: "Lemoniz", reactors: 2, MWe: 1800, country: "Spain" },
+        { latitude: 49.04167, longitude: 9.175, label: "Neckarwestheim", reactors: 2, MWe: 1310, country: "Germany" },
+        { latitude: 48.51528, longitude: 3.51778, label: "Nogent", reactors: 2, MWe: 2620, country: "France" },
+        { latitude: 61.23694, longitude: 21.44083, label: "Olkiluoto", reactors: 2, MWe: 1740, country: "Finland" },
+        { latitude: 57.41556, longitude: 16.67111, label: "Oskarshamn", reactors: 1, MWe: 1400, country: "Sweden" },
+        { latitude: 46.5725, longitude: 18.85417, label: "Paks", reactors: 4, MWe: 1889, country: "Hungary" },
+        { latitude: 49.85806, longitude: 0.63556, label: "Paluel", reactors: 4, MWe: 5320, country: "France" },
+        { latitude: 49.97667, longitude: 1.21194, label: "Penly", reactors: 2, MWe: 2660, country: "France" },
+        { latitude: 49.2525, longitude: 8.43639, label: "Philippsburg", reactors: 2, MWe: 1402, country: "Germany" },
+        { latitude: 57.25972, longitude: 12.11083, label: "Ringhals", reactors: 4, MWe: 3649, country: "Sweden" },
+        { latitude: 51.32778, longitude: 25.89167, label: "Rivne", reactors: 4, MWe: 2645, country: "Ukraine" },
+        { latitude: 45.40444, longitude: 4.75444, label: "Saint-Alban", reactors: 2, MWe: 2670, country: "France" },
+        { latitude: 47.72, longitude: 1.5775, label: "Saint-Laurent", reactors: 2, MWe: 1830, country: "France" },
+        { latitude: 52.21333, longitude: 1.61861, label: "Sizewell-B", reactors: 1, MWe: 1188, country: "United Kingdom" },
+        { latitude: 47.81667, longitude: 31.21667, label: "South Ukraine", reactors: 3, MWe: 2850, country: "Ukraine" },
+        { latitude: 49.18, longitude: 14.37611, label: "Temelin", reactors: 2, MWe: 1926, country: "Czech Republic" },
+        { latitude: 50.53472, longitude: 5.2725, label: "Tihange", reactors: 3, MWe: 3016, country: "Belgium" },
+        { latitude: 55.96806, longitude: -2.40917, label: "Torness", reactors: 2, MWe: 1205, country: "United Kingdom" },
+        { latitude: 44.32972, longitude: 4.73222, label: "Tricastin", reactors: 4, MWe: 3660, country: "France" },
+        { latitude: 40.70111, longitude: -2.62194, label: "Trillo", reactors: 1, MWe: 1003, country: "Spain" },
+        { latitude: 40.95139, longitude: 0.86667, label: "Vandellòs", reactors: 1, MWe: 1045, country: "Spain" },
+        { latitude: 47.51222, longitude: 34.58583, label: "Zaporizhzhia", reactors: 6, MWe: 5700, country: "Ukraine"  }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.power-plants-map.symbol-map {
+  --category-color-0n: #ffeda0;
+  --category-color-1n: #fed976;
+  --category-color-2n: #feb24c;
+  --category-color-3n: #fd8d3c;
+  --category-color-4n: #fc4e2a;
+  --category-color-5n: #e31a1c;
+  --category-color-6n: #b10026;
+  --category-color-7n: #630015;
+}
+
+.marseille-facilities-map.symbol-map:deep(.symbol-map__main__features__item) {
+  stroke: #ccc;
+}
+</style>
+
+::: api-table maps/SymbolMap.vue :::

package/docs/pages/structure/breakpoints/doc.md

@@ -0,0 +1,3 @@
+---
+badge: TODO
+---

package/docs/pages/structure/grid/doc.md

@@ -0,0 +1,3 @@
+---
+badge: TODO
+---