46 lines
11 KiB
JavaScript
46 lines
11 KiB
JavaScript
import{S as F,i as Y,s as z,c as b,m as _,t as h,a as g,d as k,o as ee,D as te,W as ae,p as W,l as O,e as ie,h as w,F as V,j as G,b as D,k as re,q as E,r as M,f as C,E as ne,u as H,v as J,w as K,x as Q,C as I,n as se}from"./index-2c1648fc.js";import{g as X,a as Z}from"./spread-8a54911c.js";import{p as oe,M as le,T as ce,S as q}from"./collect-stories-640c7888.js";import{G as pe}from"./GraphicBlock-3f8c4735.js";import{b as fe,w as de}from"./withParams-47e2ab71.js";import"./Block-d69850f9.js";import"./PaddingReset-05774ed0.js";import"./marked.esm-76161808.js";const me=`Easily add a responsive Datawrapper embed on your page.
|
|
|
|
\`\`\`svelte
|
|
<script>
|
|
import { DatawrapperChart } from '@reuters-graphics/graphics-components';
|
|
<\/script>
|
|
|
|
<DatawrapperChart
|
|
title="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
|
|
/>
|
|
\`\`\`
|
|
|
|
##### Getting the chart URL for \`src\`
|
|
|
|
Copy the source url for the Datawrapper chart in the \`src\` prop.
|
|
You can get this from the published url on Reuters Graphics.
|
|
|
|
- Publish the chart on Datawrapper.
|
|
- Go to the **Datawrapper charts** Teams channel, wait for the graphic to finish publishing.
|
|
- Inside **Embed code (for developers only)**, find and copy the url inside the \`src\` prop. (It ends in \`media-embed.html\`.)
|
|
|
|
**Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
|
|
`,ue=`By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
|
|
|
|
At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
|
|
|
|
Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
|
|
`,he=n=>({}),B=n=>({}),ge=n=>({}),U=n=>({});function P(n){let t;const i=n[12].title,e=H(i,n,n[14],U);return{c(){e&&e.c()},m(a,r){e&&e.m(a,r),t=!0},p(a,r){e&&e.p&&(!t||r&16384)&&J(e,i,a,a[14],t?Q(i,a[14],r,ge):K(a[14]),U)},i(a){t||(h(e,a),t=!0)},o(a){g(e,a),t=!1},d(a){e&&e.d(a)}}}function j(n){let t;const i=n[12].notes,e=H(i,n,n[14],B);return{c(){e&&e.c()},m(a,r){e&&e.m(a,r),t=!0},p(a,r){e&&e.p&&(!t||r&16384)&&J(e,i,a,a[14],t?Q(i,a[14],r,he):K(a[14]),B)},i(a){t||(h(e,a),t=!0)},o(a){g(e,a),t=!1},d(a){e&&e.d(a)}}}function we(n){let t,i,e,a,r,u,f,p=n[11].title&&P(n),c=n[11].notes&&j(n);return{c(){p&&p.c(),t=W(),i=O("div"),e=O("iframe"),r=W(),c&&c.c(),u=ie(),w(e,"title",n[2]),w(e,"aria-label",n[4]),w(e,"id",n[5]),V(e.src,a=n[6])||w(e,"src",a),w(e,"scrolling",n[7]),w(e,"frameborder","0"),G(e,"width","0"),G(e,"min-width","100%",1),G(e,"border","none"),w(i,"class","datawrapper-chart")},m(o,d){p&&p.m(o,d),D(o,t,d),D(o,i,d),re(i,e),n[13](e),D(o,r,d),c&&c.m(o,d),D(o,u,d),f=!0},p(o,d){o[11].title?p?(p.p(o,d),d&2048&&h(p,1)):(p=P(o),p.c(),h(p,1),p.m(t.parentNode,t)):p&&(E(),g(p,1,1,()=>{p=null}),M()),(!f||d&4)&&w(e,"title",o[2]),(!f||d&16)&&w(e,"aria-label",o[4]),(!f||d&32)&&w(e,"id",o[5]),(!f||d&64&&!V(e.src,a=o[6]))&&w(e,"src",a),(!f||d&128)&&w(e,"scrolling",o[7]),o[11].notes?c?(c.p(o,d),d&2048&&h(c,1)):(c=j(o),c.c(),h(c,1),c.m(u.parentNode,u)):c&&(E(),g(c,1,1,()=>{c=null}),M())},i(o){f||(h(p),h(c),f=!0)},o(o){g(p),g(c),f=!1},d(o){o&&(C(t),C(i),C(r),C(u)),p&&p.d(o),n[13](null),c&&c.d(o)}}}function ye(n){let t,i;return t=new pe({props:{width:n[8],textWidth:n[9],title:n[0],description:n[1],notes:n[3],$$slots:{default:[we]},$$scope:{ctx:n}}}),{c(){b(t.$$.fragment)},m(e,a){_(t,e,a),i=!0},p(e,[a]){const r={};a&256&&(r.width=e[8]),a&512&&(r.textWidth=e[9]),a&1&&(r.title=e[0]),a&2&&(r.description=e[1]),a&8&&(r.notes=e[3]),a&19700&&(r.$$scope={dirty:a,ctx:e}),t.$set(r)},i(e){i||(h(t.$$.fragment,e),i=!0)},o(e){g(t.$$.fragment,e),i=!1},d(e){k(t,e)}}}function be(n,t,i){let e,{$$slots:a={},$$scope:r}=t;const u=ee(a);let{title:f=null}=t,{description:p=null}=t,{frameTitle:c=""}=t,{notes:o=null}=t,{ariaLabel:d=""}=t,{id:v=""}=t,{src:s}=t,{scrolling:m="no"}=t,{width:A="normal"}=t,{textWidth:T="normal"}=t,y;te(()=>{typeof window<"u"&&window.addEventListener("message",e)}),ae(()=>{typeof window<"u"&&window.removeEventListener("message",e)});function $(l){ne[l?"unshift":"push"](()=>{y=l,i(10,y)})}return n.$$set=l=>{"title"in l&&i(0,f=l.title),"description"in l&&i(1,p=l.description),"frameTitle"in l&&i(2,c=l.frameTitle),"notes"in l&&i(3,o=l.notes),"ariaLabel"in l&&i(4,d=l.ariaLabel),"id"in l&&i(5,v=l.id),"src"in l&&i(6,s=l.src),"scrolling"in l&&i(7,m=l.scrolling),"width"in l&&i(8,A=l.width),"textWidth"in l&&i(9,T=l.textWidth),"$$scope"in l&&i(14,r=l.$$scope)},n.$$.update=()=>{n.$$.dirty&1024&&(e=l=>{if(l.data["datawrapper-height"]!==void 0){const R=[y];for(const x in l.data["datawrapper-height"])for(let S=0;S<R.length;S++)R[S].contentWindow===l.source&&(R[S].style.height=l.data["datawrapper-height"][x]+"px")}})},[f,p,c,o,d,v,s,m,A,T,y,u,a,$,r]}class L extends F{constructor(t){super(),Y(this,t,be,ye,z,{title:0,description:1,frameTitle:2,notes:3,ariaLabel:4,id:5,src:6,scrolling:7,width:8,textWidth:9})}}L.__docgen={version:3,name:"DatawrapperChart.svelte",data:[{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Title of the graphic",name:"title",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Description of the graphic, passed in as a markdown string.",name:"description",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe title",name:"frameTitle",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:"Notes to the graphic, passed in as a markdown string.",name:"notes",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:null},{keywords:[{name:"required",description:""}],visibility:"public",description:"iframe aria label",name:"ariaLabel",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[],visibility:"public",description:"iframe id",name:"id",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:""},{keywords:[{name:"required",description:""}],visibility:"public",description:"Datawrapper embed URL",name:"src",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"any",type:"any"}},{keywords:[],visibility:"public",description:"iframe scrolling option",name:"scrolling",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"no"},{keywords:[],visibility:"public",description:"Width of the chart within the text well.",name:"width",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"},{keywords:[{name:"type",description:"{string}"}],visibility:"public",description:`Set a different width for the text within the text well, for example,
|
|
"normal" to keep the title, description and notes inline with the rest
|
|
of the text well. Can't ever be wider than \`width\`.`,name:"textWidth",kind:"let",static:!1,readonly:!1,type:{kind:"type",text:"string",type:"string"},defaultValue:"normal"}],computed:[],methods:[],components:[],description:null,keywords:[],events:[],slots:[{keywords:[],visibility:"public",description:"Custom headline and chatter slot",name:"title"},{keywords:[],visibility:"public",description:"Custom notes and source slot",name:"notes"}],refs:[]};function _e(n){let t,i;const e=[n[1]];let a={};for(let r=0;r<e.length;r+=1)a=I(a,e[r]);return t=new L({props:a}),{c(){b(t.$$.fragment)},m(r,u){_(t,r,u),i=!0},p(r,u){const f=u&2?X(e,[Z(r[1])]):{};t.$set(f)},i(r){i||(h(t.$$.fragment,r),i=!0)},o(r){g(t.$$.fragment,r),i=!1},d(r){k(t,r)}}}function ke(n){let t,i;return t=new L({props:{frameTitle:"Global abortion access",ariaLabel:"map",id:"abortion-rights-map",src:"https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html",title:"Global abortion access",description:"A map of worldwide access to abortion.",notes:`Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.
|
|
|
|
Source: Center for Reproductive Rights`}}),{c(){b(t.$$.fragment)},m(e,a){_(t,e,a),i=!0},p:se,i(e){i||(h(t.$$.fragment,e),i=!0)},o(e){g(t.$$.fragment,e),i=!1},d(e){k(t,e)}}}function De(n){let t,i,e,a,r,u,f,p;const c=[{title:"Components/DatawrapperChart"},{component:L},n[0]];let o={};for(let s=0;s<c.length;s+=1)o=I(o,c[s]);t=new le({props:o}),e=new ce({props:{$$slots:{default:[_e,({args:s})=>({1:s}),({args:s})=>s?2:0]},$$scope:{ctx:n}}}),r=new q({props:{name:"Default",args:{src:"https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html",id:"abortion-rights-map",ariaLabel:"map",frameTitle:"Global abortion access"}}});const d=[{name:"With chatter"},fe(ue)];let v={$$slots:{default:[ke]},$$scope:{ctx:n}};for(let s=0;s<d.length;s+=1)v=I(v,d[s]);return f=new q({props:v}),{c(){b(t.$$.fragment),i=W(),b(e.$$.fragment),a=W(),b(r.$$.fragment),u=W(),b(f.$$.fragment)},m(s,m){_(t,s,m),D(s,i,m),_(e,s,m),D(s,a,m),_(r,s,m),D(s,u,m),_(f,s,m),p=!0},p(s,[m]){const A=m&1?X(c,[c[0],c[1],Z(s[0])]):{};t.$set(A);const T={};m&6&&(T.$$scope={dirty:m,ctx:s}),e.$set(T);const y={};m&4&&(y.$$scope={dirty:m,ctx:s}),f.$set(y)},i(s){p||(h(t.$$.fragment,s),h(e.$$.fragment,s),h(r.$$.fragment,s),h(f.$$.fragment,s),p=!0)},o(s){g(t.$$.fragment,s),g(e.$$.fragment,s),g(r.$$.fragment,s),g(f.$$.fragment,s),p=!1},d(s){s&&(C(i),C(a),C(u)),k(t,s),k(e,s),k(r,s),k(f,s)}}}function Ce(n){return[{...de(me),argTypes:{width:{control:"select",options:["normal","wide","wider","widest","fluid"]}}}]}class ve extends F{constructor(t){super(),Y(this,t,Ce,De,z,{})}}const N=oe(ve,{meta:{title:"Components/DatawrapperChart"},stories:{"tpl:default":{storyId:"components-datawrapperchart--default",name:"default",template:!0,source:"<DatawrapperChart {...args} />",hasArgs:!0},Default:{storyId:"components-datawrapperchart--default",name:"Default",template:!1,source:"",hasArgs:!1},WithChatter:{storyId:"components-datawrapperchart--with-chatter",name:"With chatter",template:!1,source:`<DatawrapperChart
|
|
frameTitle="Global abortion access"
|
|
ariaLabel="map"
|
|
id="abortion-rights-map"
|
|
src="https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html"
|
|
title="Global abortion access"
|
|
description="A map of worldwide access to abortion."
|
|
notes="{'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.
|
|
|
|
Source: Center for Reproductive Rights'}"
|
|
/>`,hasArgs:!1}},allocatedIds:["default","Meta","Template","Story","componentDocs","withChatterDocs","DatawrapperChart","withComponentDocs","withStoryDocs"]}),Ne=N.meta,Oe=["Default","WithChatter"],Ve=N.stories.Default,Ee=N.stories.WithChatter;export{Ve as Default,Ee as WithChatter,Oe as __namedExportsOrder,Ne as default};
|
|
//# sourceMappingURL=DatawrapperChart.stories-9611b936.js.map
|