"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", code: "code", em: "em", h1: "h1", h2: "h2", h3: "h3", h4: "h4", img: "img", li: "li", ol: "ol", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "data-explorer", children: [_jsx(_components.a, { className: "heading-link", href: "#data-explorer", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Data Explorer"] }), "\n", _jsx(_components.p, { children: "The Datopian Data Explorer is a React single page application and framework for creating and displaying rich data explorers (think Tableau-lite). Use stand-alone or with CKAN. For CKAN it is a drop-in replacement for ReclineJS in CKAN Classic." }), "\n", _jsx(_components.img, { src: "https://tech.datopian.com/assets/data-explorer.png", alt: "Data Explorer" }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "http://montreal.ckan.io/ville-de-montreal/geobase-double#resource-G%C3%83%C2%A9obase%20double", target: "_blank", rel: "noopener noreferrer", children: "Data Explorer for the City of Montreal" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "features--highlights", children: [_jsx(_components.a, { className: "heading-link", href: "#features--highlights", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Features / Highlights"] }), "\n", _jsx(_components.p, { children: "\"Data Explorer\" is an embedable React/Redux application that allows users to:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Explore tabular, map, PDF, and other types of data" }), "\n", _jsxs(_components.li, { children: ["Create map views of tabular data using the ", _jsx(_components.a, { href: "#map-builder", children: "Map Builder" })] }), "\n", _jsxs(_components.li, { children: ["Create charts and graphs of tabular data using ", _jsx(_components.a, { href: "#chart-builder", children: "Chart Builder" })] }), "\n", _jsxs(_components.li, { children: ["Easily build SQL queries for Data Store API using graphical interface of ", _jsx(_components.a, { href: "#datastore-query-builder", children: "Datastore Query Builder" })] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "components", children: [_jsx(_components.a, { className: "heading-link", href: "#components", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Components"] }), "\n", _jsxs(_components.p, { children: ["The Data Explorer application acts as a coordinating layer and state management solution – via ", _jsx(_components.a, { href: "https://redux.js.org/", target: "_blank", rel: "noopener noreferrer", children: "Redux" }), " – for several libraries, also maintained by Datopian."] }), "\n", _jsxs(_components.h3, { id: "datapackage-views", children: [_jsx(_components.a, { className: "heading-link", href: "#datapackage-views", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.a, { href: "https://github.com/datopian/datapackage-views-js", target: "_blank", rel: "noopener noreferrer", children: "Datapackage Views" })] }), "\n", _jsx(_components.img, { src: "https://tech.datopian.com/assets/datapackage-views.png", alt: "Datapackage Views" }), "\n", _jsx(_components.p, { children: "Datapackage View is the rendering engine for the main window of the Data Explorer." }), "\n", _jsxs(_components.p, { children: ["The above image displays a table shown at the ", _jsx(_components.code, { className: "language-auto", children: "Table" }), " tab, but note that Datapackage-views renders ", _jsx(_components.em, { children: "all" }), " data visualizations: Tables, Charts, Maps, and others."] }), "\n", _jsxs(_components.h3, { id: "datastore-query-builder", children: [_jsx(_components.a, { className: "heading-link", href: "#datastore-query-builder", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.a, { href: "https://github.com/datopian/datastore-query-builder", target: "_blank", rel: "noopener noreferrer", children: "Datastore Query Builder" })] }), "\n", _jsx("img", { alt: "Datastore Query Builder", src: "https://tech.datopian.com/static/img/docs/dms/data-explorer/query-builder.png", width: "250px" }), "\n", _jsxs(_components.p, { children: ["The Datastore Query Builder interfaces with the Datastore API to allow users to search data resources using an SQL like interface. See the docs for this module here - ", _jsx(_components.a, { href: "/dms/data-explorer/datastore-query-builder", children: "Datastore Query Builder docs" }), "."] }), "\n", _jsxs(_components.h3, { id: "map-builder", children: [_jsx(_components.a, { className: "heading-link", href: "#map-builder", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.a, { href: "https://github.com/datopian/map-builder", target: "_blank", rel: "noopener noreferrer", children: "Map Builder" })] }), "\n", _jsx("img", { alt: "Map Builder", src: "https://tech.datopian.com/static/img/docs/dms/data-explorer/map-builder.png", width: "250px" }), "\n", _jsx(_components.p, { children: "Map Builder allows users to build maps based on geo-data contained in tabular resources." }), "\n", _jsx(_components.p, { children: "Supported geo formats:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "lon / lat (separate columns)" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "chart-builder", children: [_jsx(_components.a, { className: "heading-link", href: "#chart-builder", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), _jsx(_components.a, { href: "https://github.com/datopian/chart-builder", target: "_blank", rel: "noopener noreferrer", children: "Chart Builder" })] }), "\n", _jsx("img", { alt: "Chart Builder", src: "https://tech.datopian.com/static/img/docs/dms/data-explorer/chart-builder.png", width: "250px" }), "\n", _jsx(_components.p, { children: "Chart Builder allows users to create charts and graphs from tabular data." }), "\n", _jsxs(_components.h2, { id: "quick-start-sandbox", children: [_jsx(_components.a, { className: "heading-link", href: "#quick-start-sandbox", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Quick-start (Sandbox)"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Clone the data explorer" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsx(_components.code, { className: "language-bash code-highlight", children: _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "git" }), " clone git@gitlab.com:datopian/data-explorer.git\n"] }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Use yarn to install the project dependencies" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsxs(_components.code, { className: "language-bash code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token builtin class-name", children: "cd" }), " data-explorer\n"] }), _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "yarn" }), "\n"] })] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["To see the Data Explorer running in a sandbox environment run ", _jsx(_components.a, { href: "https://github.com/react-cosmos/react-cosmos", target: "_blank", rel: "noopener noreferrer", children: "Cosmos" })] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsx(_components.code, { className: "language-bash code-highlight", children: _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "yarn" }), " cosmos\n"] }) }) }), "\n", _jsxs(_components.h2, { id: "configuration", children: [_jsx(_components.a, { className: "heading-link", href: "#configuration", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Configuration"] }), "\n", _jsxs(_components.p, { children: [_jsxs(_components.a, { href: "#add-data-explorer-tags-to-the-page-markup", children: [_jsx(_components.code, { className: "language-auto", children: "data-datapackage" }), " attribute"] }), " may influence how the element will be displayed. It can be created from a ", _jsx(_components.a, { href: "https://frictionlessdata.io/specs/data-package/", target: "_blank", rel: "noopener noreferrer", children: "datapackage descriptor" }), "."] }), "\n", _jsxs(_components.h3, { id: "fixtures", children: [_jsx(_components.a, { className: "heading-link", href: "#fixtures", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Fixtures"] }), "\n", _jsxs(_components.p, { children: ["Until we have better documentation on Data Explorer settings, use the ", _jsx(_components.a, { href: "https://gitlab.com/datopian/data-explorer/blob/master/__fixtures__/with_widgets/geojson_simple.js", target: "_blank", rel: "noopener noreferrer", children: "Cosmos fixtures" }), " as an example of how to instantiate / configure the Data Explorer."] }), "\n", _jsxs(_components.h3, { id: "serialized-state", children: [_jsx(_components.a, { className: "heading-link", href: "#serialized-state", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Serialized state"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "store->serializedState" }), " is a representation of the application state ", _jsx(_components.em, { children: "without fetched data" }), "\nA data-explorer can be \"hydrated\" using the serialized state, it will refetch the data, and will render in the same state it was exported in"] }), "\n", _jsxs(_components.h3, { id: "share-links", children: [_jsx(_components.a, { className: "heading-link", href: "#share-links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Share links"] }), "\n", _jsxs(_components.p, { children: ["Share links can be added in ", _jsx(_components.code, { className: "language-auto", children: "datapakage.resources[0].api" }), " attribute."] }), "\n", _jsx(_components.p, { children: "There is common limit of up 2000 characters on URL strings. Our share links contain the entire application store tree, which is often larger than 2000 characters, in which the application state cannot be shared via URL. Thems the breaks." }), "\n", _jsxs(_components.h2, { id: "translations", children: [_jsx(_components.a, { className: "heading-link", href: "#translations", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Translations"] }), "\n", _jsxs(_components.h3, { id: "add-a-translation-to-data-explorer", children: [_jsx(_components.a, { className: "heading-link", href: "#add-a-translation-to-data-explorer", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Add a Translation To Data Explorer"] }), "\n", _jsx(_components.p, { children: "To add a translation to a new language to the data explorer you need to:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "clone the repository you need to update" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsx(_components.code, { className: "language-bash code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token function", children: "git" }), " clone git@gitlab.com:datopian/data-explorer.git\n"] }) }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsxs(_components.li, { children: ["go to ", _jsx(_components.code, { className: "language-auto", children: "src/i18n/locales/" }), " folder"] }), "\n", _jsxs(_components.li, { children: ["add a new sub-folder with locale name and the new language json file (e.g. ", _jsx(_components.code, { className: "language-auto", children: "src/i18n/locales/ru/translation.json" }), ")"] }), "\n", _jsxs(_components.li, { children: ["add the new file to resources settings in ", _jsx(_components.code, { className: "language-auto", children: "i18n.js" }), ":\n", _jsx(_components.code, { className: "language-auto", children: "src/i18n/i18n.js" }), ":"] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "en" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/en/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "da" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/da/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "ru" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/ru/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "ru" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "translation" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./locales/ru/translation.json'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] })] }) }), "\n", _jsxs(_components.ol, { start: "5", children: ["\n", _jsx(_components.li, { children: "create a merge request with the changes" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "add-a-translation-to-a-component", children: [_jsx(_components.a, { className: "heading-link", href: "#add-a-translation-to-a-component", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Add a translation To a Component"] }), "\n", _jsx(_components.p, { children: "Some strings may come from a component, to add translation for them will require some extra steps, e.g. datapackage-views-js:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "clone the repository" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsx(_components.code, { className: "language-bash code-highlight", children: _jsx(_components.span, { className: "code-line", children: "https://github.com/datopian/datapackage-views-js.git\n" }) }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsxs(_components.li, { children: ["go to ", _jsx(_components.code, { className: "language-auto", children: "src/i18n/locales/" }), " folder"] }), "\n", _jsxs(_components.li, { children: ["add a new sub-folder with locale name and the new language json file (e.g. ", _jsx(_components.code, { className: "language-auto", children: "src/i18n/locales/ru/translation.json" }), ")"] }), "\n", _jsxs(_components.li, { children: ["add the new file to resources settings in ", _jsx(_components.code, { className: "language-auto", children: "i18n.js" }), ":\n", _jsx(_components.code, { className: "language-auto", children: "src/i18n/i18n.js" }), ":"] }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "ru" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/ru/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "resources" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "ru" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token literal-property property", children: "translation" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ru", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] })] }) }), "\n", _jsxs(_components.ol, { start: "5", children: ["\n", _jsx(_components.li, { children: "create a pull request for datapackage-views-js" }), "\n", _jsx(_components.li, { children: "get the new datapackage-views-js version after merging (e.g. 1.3.0)" }), "\n", _jsx(_components.li, { children: "clone data-explorer" }), "\n", _jsxs(_components.li, { children: ["upgrade the data-explorer's datapackage-views-js dependency with the new version:\na. update package.json\nb. run ", _jsx(_components.code, { className: "language-auto", children: "yarn install" })] }), "\n", _jsx(_components.li, { children: "add the component's translations path to Data Explorer:" }), "\n"] }), "\n", _jsx(_components.pre, { className: "language-javascript", children: _jsxs(_components.code, { className: "language-javascript code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "en" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/en/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "da" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/da/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token keyword module", children: "import" }), " ", _jsx(_components.span, { className: "token imports", children: "ru" }), " ", _jsx(_components.span, { className: "token keyword module", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'./locales/ru/translation.json'" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "ru" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "translation" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'./locales/ru/translation.json'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), _jsx(_components.span, { className: "token method function property-access", children: "require" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'datapackage-views-js/src/i18n/locales/ru/translation.json'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token spread operator", children: "..." }), "\n"] })] }) }), "\n", _jsxs(_components.ol, { start: "10", children: ["\n", _jsx(_components.li, { children: "create a merge request for data-explorer" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "testing-a-newly-added-language", children: [_jsx(_components.a, { className: "heading-link", href: "#testing-a-newly-added-language", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Testing a Newly Added Language"] }), "\n", _jsxs(_components.p, { children: ["To see your language changes in Data Explorer you can run ", _jsx(_components.code, { className: "language-auto", children: "yarn start" }), " and change the language cookie of the page (", _jsx(_components.code, { className: "language-auto", children: "defaultLocale" }), "):"] }), "\n", _jsx(_components.img, { src: "https://tech.datopian.com/assets/i18n-cookie.png", alt: "i18n Cookie" }), "\n", _jsxs(_components.h3, { id: "language-detection", children: [_jsx(_components.a, { className: "heading-link", href: "#language-detection", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Language detection"] }), "\n", _jsxs(_components.p, { children: ["Language detection rules are determined by ", _jsx(_components.code, { className: "language-auto", children: "detection" }), " option in ", _jsx(_components.code, { className: "language-auto", children: "src/i18n/i18n.js" }), " file. Please edit with care, as other projects may already depend on them."] }), "\n", _jsxs(_components.h2, { id: "embedding-in-ckan-ng-theme", children: [_jsx(_components.a, { className: "heading-link", href: "#embedding-in-ckan-ng-theme", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Embedding in CKAN NG Theme"] }), "\n", _jsxs(_components.h3, { id: "copy-bundle-files-to-themes-public-directory", children: [_jsx(_components.a, { className: "heading-link", href: "#copy-bundle-files-to-themes-public-directory", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Copy bundle files to theme's ", _jsx(_components.code, { className: "language-auto", children: "public" }), " directory"] }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsxs(_components.code, { className: "language-bash code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "cp" }), " data-explorer/build/static/js/*.js frontend-v2/themes/your_theme/public/js\n"] }), _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "cp" }), " data-explorer/build/static/js/*.map frontend-v2/themes/your_theme/public/js\n"] }), _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "cp" }), " data-explorer/build/static/css/* frontend-v2/themes/your_theme/public/css\n"] })] }) }), "\n", _jsxs(_components.h4, { id: "note-on-app-bundles", children: [_jsx(_components.a, { className: "heading-link", href: "#note-on-app-bundles", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Note on app bundles"] }), "\n", _jsxs(_components.p, { children: ["The bundled resources have a hash in the filename, for example ", _jsx(_components.code, { className: "language-auto", children: "2.a3e71132.chunk.js" })] }), "\n", _jsx(_components.p, { children: "During development it may be preferable to remove the hash from the file name to avoid having to update the script tag during iteration, for example" }), "\n", _jsx(_components.pre, { className: "language-bash", children: _jsx(_components.code, { className: "language-bash code-highlight", children: _jsxs(_components.span, { className: "code-line", children: ["$ ", _jsx(_components.span, { className: "token function", children: "mv" }), " ", _jsx(_components.span, { className: "token number", children: "2" }), ".a3e71132.chunk.js ", _jsx(_components.span, { className: "token number", children: "2" }), ".chunk.js\n"] }) }) }), "\n", _jsx(_components.p, { children: "A couple caveats:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { className: "language-auto", children: ".map" }), " file names should remain the same so that they are loaded properly"] }), "\n", _jsx(_components.li, { children: "Browser cache may need to be invalidated manually to ensure that the latest script is loaded" }), "\n"] }), "\n", _jsxs(_components.h3, { id: "require-data-explorer-resources-in-ng-theme-template", children: [_jsx(_components.a, { className: "heading-link", href: "#require-data-explorer-resources-in-ng-theme-template", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Require Data Explorer resources in NG theme template"] }), "\n", _jsxs(_components.p, { children: ["In ", _jsx(_components.code, { className: "language-auto", children: "/themes/your-theme/views/your-template-wth-explplorer.html" })] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "{% block content %}\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "rel" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "stylesheet", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text/css", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "/static/css/main.chunk.css", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "link"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "rel" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "stylesheet", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text/css", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "/static/css/2.chunk.css", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "configure-datapackage", children: [_jsx(_components.a, { className: "heading-link", href: "#configure-datapackage", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Configure datapackage"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-htmlmixed= code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsx(_components.span, { className: "code-line", children: " const datapackage = {\n" }), _jsx(_components.span, { className: "code-line", children: " resources: [{resource}], // single resource for this view\n" }), _jsx(_components.span, { className: "code-line", children: " views: [...], // can be 3 views aka widgets\n" }), _jsx(_components.span, { className: "code-line", children: " controls: { \n" }), _jsx(_components.span, { className: "code-line", children: " showChartBuilder: true,\n" }), _jsx(_components.span, { className: "code-line", children: " showMapBuilder: true \n" }), _jsx(_components.span, { className: "code-line", children: " }\n" }), _jsx(_components.span, { className: "code-line", children: " }\n" }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }), "\n", _jsxs(_components.h3, { id: "add-data-explorer-tags-to-the-page-markup", children: [_jsx(_components.a, { className: "heading-link", href: "#add-data-explorer-tags-to-the-page-markup", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Add data-explorer tags to the page markup"] }), "\n", _jsxs(_components.p, { children: ["Each Data Explorer instance needs a corresponding ", _jsx(_components.code, { className: "language-auto", children: "

" }), " in the DOM. For example:"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsx(_components.span, { className: "code-line", children: "{% for resource in dataset.resources %}\n" }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "class" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "data-explorer", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "data-explorer-{{ loop.index - 1 }}", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "data-datapackage" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "{{ dataset.dataExplorers[loop.index - 1] | safe}}", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "{% endfor %}\n" })] }) }), "\n", _jsx(_components.p, { children: "Note that each container div needs the following attributes:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "class=\"data-explorer\"" }), " (All explorer divs should have this class)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "id=\"data-explorer-0\"" }), " (1, 2, etc…)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { className: "language-auto", children: "data-datapackage=" }), '{JSON CONFIG}', "` (A valid JSON configuration)"] }), "\n"] }), "\n", _jsxs(_components.h3, { id: "add-data-explorer-scripts-to-your-template", children: [_jsx(_components.a, { className: "heading-link", href: "#add-data-explorer-scripts-to-your-template", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Add data explorer scripts to your template"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text/javascript", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "/static/js/runtime~main.js", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text/javascript", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "/static/js/2.chunk.js", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "text/javascript", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "/static/js/main.chunk.js", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.em, { children: "NOTE" }), " that the scripts should be loaded ", _jsxs(_components.em, { children: ["after the container divs are in the DOM, typically by placing the ", _jsx(_components.code, { className: "language-auto", children: "