CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Data Platform/Systems/Dashiki - Wikitech</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-sticky-header-enabled vector-toc-available";var cookie=document.cookie.match(/(?:^|; )labswikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"ba842bc1-db13-43ae-9d27-b1ab179320af","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Data_Platform/Systems/Dashiki","wgTitle":"Data Platform/Systems/Dashiki","wgCurRevisionId":2201864,"wgRevisionId":2201864,"wgArticleId":26954,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Dashiki","Data platform","Data platform systems"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Data_Platform/Systems/Dashiki","wgRelevantArticleId":26954,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikitech","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true ,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":20000,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"personal","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"wgSiteNoticeId":"2.0"};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user": "ready","user":"ready","user.options":"loading","ext.inputBox.styles":"ready","ext.pygments":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","ext.dismissableSiteNotice.styles":"ready"};RLPAGEMODULES=["ext.pygments.view","mediawiki.page.media","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.site","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.uls.interface", "ext.checkUser.clientHints","ext.dismissableSiteNotice"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.dismissableSiteNotice.styles%7Cext.inputBox.styles%7Cext.pygments%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.16"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Data Platform/Systems/Dashiki - Wikitech"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="icon" href="/static/favicon/wikitech.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikitech (en)"> <link rel="EditURI" type="application/rsd+xml" href="//wikitech.wikimedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://wikitech.wikimedia.org/wiki/Data_Platform/Systems/Dashiki"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="Wikitech Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Data_Platform_Systems_Dashiki rootpage-Data_Platform skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" title="Main menu" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-Server-admin-log:-Prod" class="mw-list-item"><a href="/wiki/Server_Admin_Log"><span>Server admin log: Prod</span></a></li><li id="n-Admin-log:-RelEng" class="mw-list-item"><a href="/wiki/Release_Engineering/SAL"><span>Admin log: RelEng</span></a></li><li id="n-Incident-status" class="mw-list-item"><a href="/wiki/Incident_status"><span>Incident status</span></a></li><li id="n-Deployments" class="mw-list-item"><a href="/wiki/Deployments"><span>Deployments</span></a></li><li id="n-SRE-Team-Help" class="mw-list-item"><a href="/wiki/SRE/SRE_Team_requests"><span>SRE Team Help</span></a></li><li id="n-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages"><span>Special pages</span></a></li> </ul> </div> </div> <div id="p-Cloud_VPS_&_Toolforge" class="vector-menu mw-portlet mw-portlet-Cloud_VPS_Toolforge" > <div class="vector-menu-heading"> Cloud VPS & Toolforge </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-Cloud-VPS-portal" class="mw-list-item"><a href="/wiki/Portal:Cloud_VPS"><span>Cloud VPS portal</span></a></li><li id="n-Toolforge-portal" class="mw-list-item"><a href="/wiki/Portal:Toolforge"><span>Toolforge portal</span></a></li><li id="n-Request-VPS-project" class="mw-list-item"><a href="https://phabricator.wikimedia.org/project/view/2875/"><span>Request VPS project</span></a></li><li id="n-Admin-log:-Cloud-VPS" class="mw-list-item"><a href="/wiki/Cloud_VPS_Server_Admin_Log"><span>Admin log: Cloud VPS</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikitech.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikitech" src="/static/images/mobile/copyright/wikitech-wordmark.svg" style="width: 8.75em; height: 1.6875em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikitech [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikitech" aria-label="Search Wikitech" autocapitalize="sentences" title="Search Wikitech [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=wikitech.wikimedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Data+Platform%2FSystems%2FDashiki" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out user-links-collapsible-item" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?wmf_source=donate&wmf_medium=sidebar&wmf_campaign=wikitech.wikimedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Data+Platform%2FSystems%2FDashiki" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"><div id="mw-dismissablenotice-anonplace"></div><script>(function(){var node=document.getElementById("mw-dismissablenotice-anonplace");if(node){node.outerHTML="\u003Cdiv class=\"mw-dismissable-notice\"\u003E\u003Cdiv class=\"mw-dismissable-notice-close\"\u003E[\u003Ca tabindex=\"0\" role=\"button\"\u003Edismiss\u003C/a\u003E]\u003C/div\u003E\u003Cdiv class=\"mw-dismissable-notice-body\"\u003E\u003C!-- CentralNotice --\u003E\u003Cdiv id=\"localNotice\" data-nosnippet=\"\"\u003E\u003Cdiv class=\"sitenotice\" lang=\"en\" dir=\"ltr\"\u003E\u003Ctable style=\"width: 75%; background-color: var(--background-color-warning-subtle, #fdf2d5); border: var(--border-subtle, 1px solid #987027); color: var(--color-base, #202122); border-radius: 10px; padding: 5px; margin: 0 auto;\"\u003E\n\u003Ctbody\u003E\u003Ctr\u003E\n\u003Ctd style=\"width:40px; height:40px; text-align:center; vertical-align:middle; padding: 2px;\"\u003E\u003Cspan typeof=\"mw:File\"\u003E\u003Ca href=\"/wiki/File:OOjs_UI_icon_alert-warning.svg\" class=\"mw-file-description\"\u003E\u003Cimg src=\"//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/OOjs_UI_icon_alert-warning.svg/30px-OOjs_UI_icon_alert-warning.svg.png\" decoding=\"async\" width=\"30\" height=\"30\" class=\"mw-file-element\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/OOjs_UI_icon_alert-warning.svg/45px-OOjs_UI_icon_alert-warning.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/3b/OOjs_UI_icon_alert-warning.svg/60px-OOjs_UI_icon_alert-warning.svg.png 2x\" data-file-width=\"20\" data-file-height=\"20\" /\u003E\u003C/a\u003E\u003C/span\u003E\n\u003C/td\u003E\n\u003Ctd style=\"text-align:center; vertical-align: middle; padding: 4px; max-height: 60px;\"\u003E\u003Cb\u003EWe are migrating Wikitech to \u003Ca href=\"/wiki/News/2024_Migrating_Wikitech_Account_to_SUL\" title=\"News/2024 Migrating Wikitech Account to SUL\"\u003ESUL\u003C/a\u003E.\u003C/b\u003E Action may be required for your \u003Ca href=\"/wiki/News/2024_Migrating_Wikitech_Account_to_SUL#What_you_need_to_do\" title=\"News/2024 Migrating Wikitech Account to SUL\"\u003E account\u003C/a\u003E.\n\u003Cp\u003E\u003Cb\u003ETrouble logging in? Please visit \u003Ca href=\"https://phabricator.wikimedia.org/T376267\" class=\"extiw\" title=\"phab:T376267\"\u003ET376267\u003C/a\u003E\u003C/b\u003E\n\u003C/p\u003E\n\u003C/td\u003E\u003C/tr\u003E\u003C/tbody\u003E\u003C/table\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E\u003C/div\u003E";}}());</script></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-Quickstart" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Quickstart"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Quickstart</span> </div> </a> <button aria-controls="toc-Quickstart-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Quickstart subsection</span> </button> <ul id="toc-Quickstart-sublist" class="vector-toc-list"> <li id="toc-Tutorial" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Tutorial"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Tutorial</span> </div> </a> <ul id="toc-Tutorial-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Intro" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Intro"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Intro</span> </div> </a> <ul id="toc-Intro-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-FAQ" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#FAQ"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>FAQ</span> </div> </a> <button aria-controls="toc-FAQ-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle FAQ subsection</span> </button> <ul id="toc-FAQ-sublist" class="vector-toc-list"> <li id="toc-Where_is_the_code?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Where_is_the_code?"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Where is the code?</span> </div> </a> <ul id="toc-Where_is_the_code?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Where_is_code_deployed?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Where_is_code_deployed?"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>Where is code deployed?</span> </div> </a> <ul id="toc-Where_is_code_deployed?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-How_do_I_put_dashiki_out_of_service?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_do_I_put_dashiki_out_of_service?"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.3</span> <span>How do I put dashiki out of service?</span> </div> </a> <ul id="toc-How_do_I_put_dashiki_out_of_service?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Deployment" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Deployment"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Deployment</span> </div> </a> <button aria-controls="toc-Deployment-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Deployment subsection</span> </button> <ul id="toc-Deployment-sublist" class="vector-toc-list"> <li id="toc-How_to_get_your_data_available_via_http" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#How_to_get_your_data_available_via_http"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>How to get your data available via http</span> </div> </a> <ul id="toc-How_to_get_your_data_available_via_http-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Can_I_implement_a_new_layout?" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Can_I_implement_a_new_layout?"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>Can I implement a new layout?</span> </div> </a> <ul id="toc-Can_I_implement_a_new_layout?-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-What_about_limn?" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#What_about_limn?"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>What about limn?</span> </div> </a> <ul id="toc-What_about_limn?-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Technical_Documentation:_Understanding_Dashiki_-_First_Steps" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Technical_Documentation:_Understanding_Dashiki_-_First_Steps"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Technical Documentation: Understanding Dashiki - First Steps</span> </div> </a> <button aria-controls="toc-Technical_Documentation:_Understanding_Dashiki_-_First_Steps-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Technical Documentation: Understanding Dashiki - First Steps subsection</span> </button> <ul id="toc-Technical_Documentation:_Understanding_Dashiki_-_First_Steps-sublist" class="vector-toc-list"> <li id="toc-Preface" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Preface"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.1</span> <span>Preface</span> </div> </a> <ul id="toc-Preface-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Overview" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Overview"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2</span> <span>Overview</span> </div> </a> <ul id="toc-Overview-sublist" class="vector-toc-list"> <li id="toc-/src/layouts" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#/src/layouts"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2.1</span> <span>/src/layouts</span> </div> </a> <ul id="toc-/src/layouts-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-/src/component" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#/src/component"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2.2</span> <span>/src/component</span> </div> </a> <ul id="toc-/src/component-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-/src/app" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#/src/app"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2.3</span> <span>/src/app</span> </div> </a> <ul id="toc-/src/app-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-/src/lib" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#/src/lib"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2.4</span> <span>/src/lib</span> </div> </a> <ul id="toc-/src/lib-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Test_your_dashboard_config_locally" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Test_your_dashboard_config_locally"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.3</span> <span>Test your dashboard config locally</span> </div> </a> <ul id="toc-Test_your_dashboard_config_locally-sublist" class="vector-toc-list"> <li id="toc-Setup" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Setup"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.3.1</span> <span>Setup</span> </div> </a> <ul id="toc-Setup-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-On-wiki_configuration" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#On-wiki_configuration"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4</span> <span>On-wiki configuration</span> </div> </a> <ul id="toc-On-wiki_configuration-sublist" class="vector-toc-list"> <li id="toc-Configuring_the_metrics-by-project_layout" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Configuring_the_metrics-by-project_layout"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.1</span> <span>Configuring the metrics-by-project layout</span> </div> </a> <ul id="toc-Configuring_the_metrics-by-project_layout-sublist" class="vector-toc-list"> <li id="toc-With_AQS_API" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#With_AQS_API"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.1.1</span> <span>With AQS API</span> </div> </a> <ul id="toc-With_AQS_API-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-With_datasets_API" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#With_datasets_API"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.1.2</span> <span>With datasets API</span> </div> </a> <ul id="toc-With_datasets_API-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-The_dashboard's_own_config_page" class="vector-toc-list-item vector-toc-level-4"> <a class="vector-toc-link" href="#The_dashboard's_own_config_page"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.1.3</span> <span>The dashboard's own config page</span> </div> </a> <ul id="toc-The_dashboard's_own_config_page-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Configuring_the_tabs_layout" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Configuring_the_tabs_layout"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.2</span> <span>Configuring the tabs layout</span> </div> </a> <ul id="toc-Configuring_the_tabs_layout-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Configuring_annotations" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Configuring_annotations"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.4.3</span> <span>Configuring annotations</span> </div> </a> <ul id="toc-Configuring_annotations-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Background" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Background"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Background</span> </div> </a> <ul id="toc-Background-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" title="Table of Contents" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Data Platform/Systems/Dashiki</span></h1> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Data_Platform/Systems/Dashiki" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="new vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Talk:Data_Platform/Systems/Dashiki&action=edit&redlink=1" rel="discussion" class="new" title="Discussion about the content page (page does not exist) [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Data_Platform/Systems/Dashiki"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Data_Platform/Systems/Dashiki"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Data_Platform/Systems/Dashiki" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Data_Platform/Systems/Dashiki" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&oldid=2201864" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Data_Platform%2FSystems%2FDashiki&id=2201864&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwikitech.wikimedia.org%2Fwiki%2FData_Platform%2FSystems%2FDashiki"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwikitech.wikimedia.org%2Fwiki%2FData_Platform%2FSystems%2FDashiki"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Data+Platform%2FSystems%2FDashiki"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Data_Platform%2FSystems%2FDashiki&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Data_Platform/Systems/Dashiki&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikitech</div> </div> <div id="contentSub"><div id="mw-content-subtitle"><div class="subpages">< <bdi dir="ltr"><a href="/wiki/Data_Platform" title="Data Platform">Data Platform</a></bdi> | <bdi dir="ltr"><a href="/wiki/Data_Platform/Systems" title="Data Platform/Systems">Systems</a></bdi></div></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><style data-mw-deduplicate="TemplateStyles:r2241375">.mw-parser-output .tpl-navsidebar{max-width:22em;background:var(--background-color-base,#fff);color:var(--color-base,#202122);border:1px solid var(--border-color-base,#a2a9b1);float:right;clear:right;margin:.5em 0 1em 1em}.mw-parser-output .tpl-navsidebar-floatright{float:right;clear:right;margin:.5em 0 1em 1em}.mw-parser-output .tpl-navsidebar-floatleft{float:left;clear:left;margin:.5em 1em 1em 0}.mw-parser-output .tpl-navsidebar-floatnone{float:none;clear:both;margin:.5em 0}.mw-parser-output .tpl-navsidebar-topimage{margin:0 0 16px 0}.mw-parser-output .tpl-navsidebar-title{margin:8px 16px;border-bottom:3px solid var(--border-color-muted,#eaecf0);font-size:20px;text-align:center}.mw-parser-output .tpl-navsidebar-image{margin:0 0 8px}.mw-parser-output .tpl-navsidebar-content{margin:0 0 16px 0;padding:0 8px}.mw-parser-output .tpl-navsidebar-heading{margin:8px 0;font-weight:bold}.mw-parser-output .tpl-navsidebar-foot{padding:0 8px;margin:0;text-align:right;font-size:smaller}@media not (min-width:720px){.mw-parser-output .tpl-navsidebar{float:none;clear:both;margin:.5em 0;max-width:none}}</style><div role="navigation" class="navigation-not-searchable tpl-navsidebar" style=""><p class="tpl-navsidebar-title"><a href="/wiki/Data_Platform" title="Data Platform">Data Platform</a></p><div class="tpl-navsidebar-contents"><div class="tpl-navsidebar-content"> <div class="mw-inputbox-centered" style=""><form name="searchbox" class="searchbox mw-inputbox-form-inline" action="/wiki/Special:Search"><div class="cdx-text-input"><input class="mw-searchInput searchboxInput cdx-text-input__input" name="search" placeholder="Search Data Platform documentation" size="40" dir="ltr"/></div><input type="hidden" value="incategory:Data_platform" name="searchfilter"/> <input type="submit" name="fulltext" value="Search" class="cdx-button"/><input type="hidden" value="Search" name="fulltext"/></form></div> </div><div class="tpl-navsidebar-content"> <p class="tpl-navsidebar-heading"><a href="/wiki/Data_Platform/Discover_data" title="Data Platform/Discover data">Discover data</a></p><p class="mw-empty-elt"> </p><ul><li><a class="external text" href="https://datahub.wikimedia.org/">Explore datasets in DataHub</a></li> <li><a href="/wiki/Data_Platform/Data_Lake" title="Data Platform/Data Lake">Data Lake</a> <ul><li><a href="/wiki/Data_Platform/Data_Lake/Traffic" title="Data Platform/Data Lake/Traffic">Traffic data</a></li> <li><a href="/wiki/Data_Platform/Data_Lake/Edits" title="Data Platform/Data Lake/Edits">Edits data</a></li> <li><a href="/wiki/Data_Platform/Data_Lake/Content" title="Data Platform/Data Lake/Content">Content data</a></li> <li><a href="/wiki/Data_Platform/Data_Lake/Events" title="Data Platform/Data Lake/Events">Events data</a></li></ul></li> <li><a href="/wiki/Data_Platform/AQS" title="Data Platform/AQS">Analytics Query Service (AQS)</a></li></ul> </div><div class="tpl-navsidebar-content"> <p class="tpl-navsidebar-heading"><a href="/wiki/Data_Platform/Analyze_data" title="Data Platform/Analyze data">Access, query, and analyze data</a></p><p class="mw-empty-elt"> </p><ul><li><a href="/wiki/Data_Platform/Data_access" title="Data Platform/Data access">Get access to internal data</a></li> <li>Analytics tools <ul><li><a href="/wiki/Data_Platform/Systems/Jupyter" title="Data Platform/Systems/Jupyter">Jupyter notebooks</a></li> <li><a href="/wiki/Data_Platform/Systems/Superset" title="Data Platform/Systems/Superset">Superset</a></li> <li><a href="/wiki/Data_Platform/Systems/Spark" title="Data Platform/Systems/Spark">Spark</a></li> <li><a href="/wiki/Data_Platform/Systems/Presto" title="Data Platform/Systems/Presto">Presto</a></li></ul></li> <li><a rel="nofollow" class="external text" href="https://github.com/wikimedia/wmfdata-python/blob/main/docs/quickstart.ipynb">Quickstart notebook</a></li> <li><a href="/wiki/Data_Platform/Internal_API_requests" title="Data Platform/Internal API requests">Internal API requests</a></li></ul> </div><div class="tpl-navsidebar-content"> <p class="tpl-navsidebar-heading"><a href="/wiki/Data_Platform/Transform_data" title="Data Platform/Transform data">Transform and publish data</a></p><p class="mw-empty-elt"> </p><ul><li><a href="https://www.mediawiki.org/wiki/Data_Platform_Engineering/Intake_Process" class="extiw" title="mw:Data Platform Engineering/Intake Process">Get help or file a request</a></li> <li><a href="/wiki/Data_Platform/Transform_data#Plan_data_lifecyle" title="Data Platform/Transform data">Plan data lifecyle</a></li> <li>Build tables and datasets <ul><li><a href="/wiki/Data_Platform/Dataset_creation" title="Data Platform/Dataset creation">Dataset creation process</a></li> <li><a href="/wiki/Data_Platform/Data_modeling_guidelines" title="Data Platform/Data modeling guidelines"> Data modeling guidelines</a></li> <li><a href="/wiki/Data_Platform/Systems/Airflow/Developer_guide" title="Data Platform/Systems/Airflow/Developer guide">Airflow developer guide</a></li> <li><a href="/wiki/Data_Platform/Systems/Hive" title="Data Platform/Systems/Hive">Hive</a></li> <li><a href="/wiki/Data_Platform/Systems/Iceberg" title="Data Platform/Systems/Iceberg">Iceberg</a></li> <li><a href="/wiki/Data_Platform/Systems/Druid" title="Data Platform/Systems/Druid">Druid</a></li></ul></li> <li>Share data and dashboards <ul><li><a href="https://foundation.wikimedia.org/wiki/Legal:Data_publication_guidelines" class="extiw" title="foundation:Legal:Data publication guidelines"> Data publication guidelines</a></li> <li><a href="/wiki/Data_Platform/Systems/Turnilo" title="Data Platform/Systems/Turnilo">Turnilo</a></li> <li><a href="/wiki/Data_Platform/Systems/Superset" title="Data Platform/Systems/Superset">Superset</a></li> <li><a href="/wiki/Data_Platform/Systems/analytics.wikimedia.org" title="Data Platform/Systems/analytics.wikimedia.org"> analytics.wikimedia.org</a></li> <li><a href="/wiki/Data_Platform/Web_publication" title="Data Platform/Web publication"> Web publication guide</a></li> <li><a class="mw-selflink selflink"> Dashiki</a></li></ul></li> <li>Manage published data <ul><li><a href="/wiki/Data_Incident_management" class="mw-redirect" title="Data Incident management"> Data Incident management</a></li> <li><a href="/wiki/Data_Platform/Data_Lake/Data_Issues" title="Data Platform/Data Lake/Data Issues"> Data Issue reporting</a></li> <li><a href="https://foundation.wikimedia.org/wiki/Legal:Data_retention_guidelines" class="extiw" title="foundation:Legal:Data retention guidelines">Data Retention Guidelines</a></li> <li><a href="/wiki/Data_Platform/Systems/Event_Data_retention" title="Data Platform/Systems/Event Data retention">Event data retention</a></li> <li><a href="/wiki/Data_Platform/Event_Sanitization" title="Data Platform/Event Sanitization">Event Sanitization</a></li> <li><a href="/wiki/Data_Platform/Dataset_archiving_and_deletion" title="Data Platform/Dataset archiving and deletion">Dataset archiving and deletion</a></li></ul></li></ul> </div><div class="tpl-navsidebar-content"> <p class="tpl-navsidebar-heading">Collect data</p><p class="mw-empty-elt"> </p><ul><li><a href="/wiki/Metrics_Platform" title="Metrics Platform">Metrics platform</a></li> <li><a href="/wiki/Event_Platform/Instrumentation_How_To" title="Event Platform/Instrumentation How To">Instrumentation tutorial</a></li> <li><a href="/wiki/Event_Platform" title="Event Platform">Event Platform</a></li></ul> <hr/> </div><div class="tpl-navsidebar-content"> <p class="tpl-navsidebar-heading">Data Platform infrastructure and operations</p><p class="mw-empty-elt"> </p><ul><li><a href="/wiki/Data_Platform/Systems" title="Data Platform/Systems">Systems overview</a></li> <li><a href="/wiki/Category:Data_pipelines" title="Category:Data pipelines"> Data pipelines</a></li> <li>Search <ul><li><a href="/wiki/Search/Technical_interactions" title="Search/Technical interactions"> Using search for new features </a></li> <li><a href="/wiki/Search_Platform/Documentation#Search" title="Search Platform/Documentation"> Search Platform </a></li> <li><a href="/wiki/Wikidata_Query_Service" title="Wikidata Query Service"> Wikidata Query Service (WDQS) </a></li></ul></li> <li>Operations and team processes <ul><li><a href="/wiki/Data_Platform_Engineering/Ops_week" title="Data Platform Engineering/Ops week">Ops week</a></li> <li><a href="/wiki/Data_Platform_Engineering" title="Data Platform Engineering">Team pages on Wikitech</a></li> <li><a href="https://www.mediawiki.org/wiki/Data_Platform_Engineering" class="extiw" title="mw:Data Platform Engineering">Team and project pages on MediaWiki.org</a></li></ul></li></ul> </div></div><p class="tpl-navsidebar-foot">[<span class="noprint plainlinks"><a class="external text" href="https://wikitech.wikimedia.org/w/index.php?title=Template:Navigation_Data_Platform&action=edit"><span title="Edit this template">edit</span></a></span>]</p></div> <p><b>Dashiki</b> is a dashboarding tool built by the Wikimedia Analytics team. It lets users declare dashboards using <a href="/wiki/Analytics/Systems/Dashiki/Configuration" class="mw-redirect" title="Analytics/Systems/Dashiki/Configuration">configuration pages</a> on a wiki. The name comes from "<b>Dash</b>boards configured on w<b>iki</b>s". It is light and performant and requires no setup other than a static webserver. Dashiki is not a tool to do data analysis, it helps you think about information architecture first, plots second. Configuration pages have schemas that are not obvious and not enforced by mediawiki on save, to help with this we're building <a href="/wiki/Analytics/Systems/Dashiki/Configuration" class="mw-redirect" title="Analytics/Systems/Dashiki/Configuration">configuration documentation</a>. </p><p>See, for example, how you can browse pageview counts for all our projects on this Dashiki installation: <a class="external text" href="https://analytics.wikimedia.org/dashboards/vital-signs/">Pageviews for all projects</a>. </p> <meta property="mw:PageProp/toc"/> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Quickstart" data-mw-thread-id="h-Quickstart"><span data-mw-comment-start="" id="h-Quickstart"></span>Quickstart<span data-mw-comment-end="h-Quickstart"></span></h2></div> <ol><li>Download dashiki: <pre>git clone https://gerrit.wikimedia.org/r/analytics/dashiki</pre></li> <li>Follow the <a rel="nofollow" class="external text" href="https://github.com/wikimedia/analytics-dashiki/blob/master/README.md">README</a> instructions to get a local webserver with which to serve the files.</li> <li>You are set, you should be seeing some data on <code>http://localhost:<your port>/dist/</code></li></ol> <div class="mw-heading mw-heading3"><h3 id="Tutorial" data-mw-thread-id="h-Tutorial-Quickstart"><span data-mw-comment-start="" id="h-Tutorial-Quickstart"></span>Tutorial<span data-mw-comment-end="h-Tutorial-Quickstart"></span></h3></div> <p>If you are looking to set up a dashboard for a WMF project, the <a href="/wiki/Data_Platform_Engineering/Dashboard_tutorial" class="mw-redirect" title="Data Platform Engineering/Dashboard tutorial">dashboard tutorial</a> explains this in more detail. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Intro" data-mw-thread-id="h-Intro"><span data-mw-comment-start="" id="h-Intro"></span>Intro<span data-mw-comment-end="h-Intro"></span></h2></div> <p>Dashiki has multiple "layouts" which are configured into dashboards via wiki pages </p><p>Here are two examples of dashiki dashboards layouts: </p> <ul><li><a class="external free" href="https://analytics.wikimedia.org/dashboards/vital-signs/">https://analytics.wikimedia.org/dashboards/vital-signs/</a></li> <li><a class="external free" href="https://analytics.wikimedia.org/dashboards/browsers">https://analytics.wikimedia.org/dashboards/browsers</a></li></ul> <p>By "layouts" we mean a certain way to combine metrics and "parameters" like wikis, dates, etc. to present some data. The layouts we support right now are: </p> <ol><li>metrics-by-projects (example is vital signs, good for wiki centric projects)</li> <li>compare (dashiki, example is the comparison of Visual Editor to Wikitext data, good for things like A/B testing)</li></ol> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="FAQ" data-mw-thread-id="h-FAQ"><span data-mw-comment-start="" id="h-FAQ"></span>FAQ<span data-mw-comment-end="h-FAQ"></span></h2></div> <div class="mw-heading mw-heading3"><h3 id="Where_is_the_code?" data-mw-thread-id="h-Where_is_the_code?-FAQ"><span id="Where_is_the_code.3F"></span><span data-mw-comment-start="" id="h-Where_is_the_code?-FAQ"></span>Where is the code?<span data-mw-comment-end="h-Where_is_the_code?-FAQ"></span></h3></div> <p>You can <a rel="nofollow" class="external text" href="https://github.com/wikimedia/analytics-dashiki">browse dashiki's code on GitHub</a>. We use Gerrit Code Review to manage changes. Setting up Dashiki is real simple and you should do that before you read further. </p> <div class="mw-heading mw-heading3"><h3 id="Where_is_code_deployed?" data-mw-thread-id="h-Where_is_code_deployed?-FAQ"><span id="Where_is_code_deployed.3F"></span><span data-mw-comment-start="" id="h-Where_is_code_deployed?-FAQ"></span>Where is code deployed?<span data-mw-comment-end="h-Where_is_code_deployed?-FAQ"></span></h3></div> <p>Dashiki instances are listed in <a rel="nofollow" class="external text" href="https://github.com/wikimedia/analytics-dashiki/blob/master/config.yaml">deployment configuration</a> </p> <div class="mw-heading mw-heading3"><h3 id="How_do_I_put_dashiki_out_of_service?" data-mw-thread-id="h-How_do_I_put_dashiki_out_of_service?-FAQ"><span id="How_do_I_put_dashiki_out_of_service.3F"></span><span data-mw-comment-start="" id="h-How_do_I_put_dashiki_out_of_service?-FAQ"></span>How do I put dashiki out of service?<span data-mw-comment-end="h-How_do_I_put_dashiki_out_of_service?-FAQ"></span></h3></div> <p>Modifying this configuration to set outofservice to "true" will make a banner appear in dashiki instances noting that an outage is going on: <a class="external free" href="https://meta.wikimedia.org/wiki/Dashiki:OutOfService">https://meta.wikimedia.org/wiki/Dashiki:OutOfService</a> </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Deployment" data-mw-thread-id="h-Deployment"><span data-mw-comment-start="" id="h-Deployment"></span>Deployment<span data-mw-comment-end="h-Deployment"></span></h2></div> <p>It uses fabric from this change onwards: <a class="external text" href="https://gerrit.wikimedia.org/r/#/c/259437/">https://gerrit.wikimedia.org/r/#/c/259437/</a> </p> <div class="mw-heading mw-heading3"><h3 id="How_to_get_your_data_available_via_http" data-mw-thread-id="h-How_to_get_your_data_available_via_http-Deployment"><span data-mw-comment-start="" id="h-How_to_get_your_data_available_via_http-Deployment"></span>How to get your data available via http<span data-mw-comment-end="h-How_to_get_your_data_available_via_http-Deployment"></span></h3></div> <p>As long as you're sure they're OK to be shared publicly, from one of the stats machines you can put files into /srv/published-datasets and those will end up on <a class="external free" href="https://analytics.wikimedia.org/datasets/">http://analytics.wikimedia.org/datasets/</a> after an rsync. </p><p>It's up to you to organize the cron that gets them there and make a nice folder hierarchy rsync is hourly. Probably you want to use <a href="/wiki/Analytics/Reportupdater" class="mw-redirect" title="Analytics/Reportupdater">Analytics/Reportupdater</a> for this. </p><p>If you want to store your data in a database you can use the staging db available of analytics store, if you have permits to analytics store you should be able to create tables on that database. </p> <div class="mw-heading mw-heading3"><h3 id="Can_I_implement_a_new_layout?" data-mw-thread-id="h-Can_I_implement_a_new_layout?-Deployment"><span id="Can_I_implement_a_new_layout.3F"></span><span data-mw-comment-start="" id="h-Can_I_implement_a_new_layout?-Deployment"></span>Can I implement a new layout?<span data-mw-comment-end="h-Can_I_implement_a_new_layout?-Deployment"></span></h3></div> <p>You can implement new layouts but the main idea is that we do not want to have just plots and plots but rather we want information architecture around a set of plots that lets users infer what is the data available. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="What_about_limn?" data-mw-thread-id="h-What_about_limn?"><span id="What_about_limn.3F"></span><span data-mw-comment-start="" id="h-What_about_limn?"></span>What about limn?<span data-mw-comment-end="h-What_about_limn?"></span></h2></div> <p>The analytics team is not actively developing limn anymore. </p> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Technical_Documentation:_Understanding_Dashiki_-_First_Steps" data-mw-thread-id="h-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"><span data-mw-comment-start="" id="h-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span>Technical Documentation: Understanding Dashiki - First Steps<span data-mw-comment-end="h-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span></h2></div> <p>(Author contact: Helen, at hjiang(at)wikimedia.org) </p><p>Continuous editing and addition to be followed. </p> <div class="mw-heading mw-heading3"><h3 id="Preface" data-mw-thread-id="h-Preface-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"><span data-mw-comment-start="" id="h-Preface-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span>Preface<span data-mw-comment-end="h-Preface-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span></h3></div> <p>You should already have npm installed if you have used JavaScript. Some key dependencies you need to run Dashiki are: glup, karma, bower. If you use other JS </p><p>visualization libraries such as d3 or dygraph, make sure those are installed as well. Dashiki has lightweight access to major JS visualization libraries, but this doesn't </p><p>mean that we can slack off on due diligence :) Much of it will be covered in the first MWE. </p> <div class="mw-heading mw-heading3"><h3 id="Overview" data-mw-thread-id="h-Overview-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"><span data-mw-comment-start="" id="h-Overview-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span>Overview<span data-mw-comment-end="h-Overview-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span></h3></div> <p>Dashiki is a client-side dashboard builder by the Analytics teams, which means that you can use whichever server you fancy. It also has a component system and clear patterns, which let you use pretty much any visualization library and data sources. The tests are run with Karma. Default view port is 5000. </p><p>All those lingo aside, let’s take a look at the organization and basic use of Dashiki from /src/, and then dig into its more detailed usage and testing from /test.. </p><p>From /src, there are six major organic parts of Dashiki: </p> <ul><li>/src/app</li> <li>/src/components</li> <li>/src/css</li> <li>/src/fonts</li> <li>/src/layouts</li> <li>/src/lib</li></ul> <p>Because /src/css and /src/fonts are only tangentially related with our purpose, and are mostly boilerplate, we are focusing on the remaining four components. And this introductory guide will walk through each part of the component, first on a high level, then go into more details. </p> <div class="mw-heading mw-heading4"><h4 id="/src/layouts" data-mw-thread-id="h-/src/layouts-Overview"><span id=".2Fsrc.2Flayouts"></span><span data-mw-comment-start="" id="h-/src/layouts-Overview"></span>/src/layouts<span data-mw-comment-end="h-/src/layouts-Overview"></span></h4></div> <p>Dashiki has many native build-in layouts, and we can build our own custom layouts. The components within /src/layouts are: </p> <ul><li>Compare <ul><li>Used in A/B test scenarios. Data can either be combined or compared side by side. Tabs, time ranges, different visualization styles can be used.</li></ul></li> <li>Metrics-by-project <ul><li>This setting is a navigator to easily find and visualize configured metrics for any WMF-hosted wiki projects.</li></ul></li> <li>tabs <ul><li>Displaying graphs organized into tabs</li></ul></li></ul> <div class="mw-heading mw-heading4"><h4 id="/src/component" data-mw-thread-id="h-/src/component-Overview"><span id=".2Fsrc.2Fcomponent"></span><span data-mw-comment-start="" id="h-/src/component-Overview"></span>/src/component<span data-mw-comment-end="h-/src/component-Overview"></span></h4></div> <p>View components are the part where people pass on parameters and interact with the dashboard, and there are many different floating pieces in this module. However, because knockout is used to separate domain data, data, and view components, it is in fact fairly easy to plug and play your favorite visualization libraries and data sources. </p><p>To fully see the picture of what /src/component provides, a detailed breakdown is as the following, and we will explore them further. The names of those components are usually self-explanatory, so I will only annotate when needed. </p> <ul><li>A-b-compare <ul><li>Note: used in comparison for A/B tests. Often used in conjuction with /src/compare and /src/component/visualizers.</li> <li>A-b-compare</li> <li>Compare-stacked-bars</li> <li>Compare-sunbursts</li> <li>Compare-timeseries</li></ul></li> <li>Annotation-list <ul><li>Note: straightforward as it is named, this is used to add annotations to graphs.</li> <li>Annotation-list</li> <li>Binding</li></ul></li> <li>Breakdown-toggle</li> <li>Button-group</li> <li>Compare-layout</li> <li>Dropdown</li> <li>Metric-selector</li> <li>Metrics-by-project-layout</li> <li>Out-of-service</li> <li>Project-selector</li> <li>Table-layout</li> <li>Visualizers <ul><li>Dygraphs-timeseries</li> <li>Filter-timeseries</li> <li>Hierarchy</li> <li>Nvd3-timeseries</li> <li>Rickshaw-timeseries</li> <li>Stacked-bars</li> <li>Sunburst</li> <li>Table-timeseries</li> <li>Vega-timeseries</li> <li>Visualizer</li> <li>Wikimetrics</li> <li>Note: dygraphs, nvd3, vega, rickshaw are names of JavaScript(JS) visualization libraries.</li></ul></li></ul> <div class="mw-heading mw-heading4"><h4 id="/src/app" data-mw-thread-id="h-/src/app-Overview"><span id=".2Fsrc.2Fapp"></span><span data-mw-comment-start="" id="h-/src/app-Overview"></span>/src/app<span data-mw-comment-end="h-/src/app-Overview"></span></h4></div> <p>We have already touched on that knockout is used in Dashiki to separate data, do and view components. View components are discussed in the section immediately preceding this /src/components, and now we switch gears to look at the data and data sources, and their interactions and conversions. </p> <ul><li>Apis <ul><li>Annotation-api</li> <li>Api-finder</li> <li>Aqs-api</li> <li>Config-api <ul><li>Note: default setting and plain-state URL handling are both based on the config api.</li></ul></li> <li>Dataset-api</li> <li>Wikimetrics</li></ul></li></ul> <ul><li>Data converters <ul><li>Note: this is mainly used to transform data sources</li> <li>Annotations-data</li> <li>Aqs-api-response</li> <li>Factory</li> <li>Hierarchy-data</li> <li>Separated-values</li> <li>Simple-separated-values</li> <li>Timeseries-data <ul><li>This defines the key class at the heart of Dashiki. Data is parsed into this format and visualizers all must understand how to read and represent it. This format carries label, color, and pattern information for each column. Instances of TimeseriesData can be merged together so that you may combine separate datasets (for example, to compare them). This is where control over colors and patterns is useful, so combined datasets can still be distinguished visually.</li></ul></li> <li>wikimetrics-timeseries</li></ul></li></ul> <ul><li>ko-extensions <ul><li>Common-viewmodes <ul><li>Copy-params</li> <li>Single-select</li></ul></li> <li>Async-observations <ul><li>Note: used for asynchronous data sync and observations</li></ul></li> <li>Datepicker-binding</li> <li>Global-bindings</li></ul></li></ul> <ul><li>Utils <ul><li>Note: each component has multiple related useful functions to apply to them accordingly. For example, “array” has two different sorting functions and one filter function, “datetime” has formatting and timespan functions, etc.</li> <li>Arrays <ul><li>Functions: sortByName, sortBYNameIgnoreCase, filler</li></ul></li> <li>Colors <ul><li>Functions: category10 (a color scale function originally from d3.js. This is a more lightweight version - you don’t have to import the whole d3 library to do it)</li></ul></li> <li>Datetime <ul><li>Functions: formatDate(formats to YYYY-MM-DD type), timespan</li></ul></li> <li>Elements <ul><li>Functions: getBounds</li></ul></li> <li>Numbers <ul><li>Functions: numberFormatter</li></ul></li> <li>Strings <ul><li>Functions: parserFromSample</li></ul></li></ul></li></ul> <ul><li>Config.js <ul><li>Note: static configuration object. Looks for config files written by the build,</li></ul></li> <li>Require.config.js <ul><li>Note: It looks for different JS libraries, semantic elements, configurations, bindings, utis, apis, view models, and converters in global scope.</li></ul></li> <li>Sitematrix <ul><li>Note: get the sitematrix and parsing it. It holds an application scoped cache once it is initiated.</li></ul></li> <li>Startup.js <ul><li>Note: everything in here is on global scope.</li></ul></li></ul> <div class="mw-heading mw-heading4"><h4 id="/src/lib" data-mw-thread-id="h-/src/lib-Overview"><span id=".2Fsrc.2Flib"></span><span data-mw-comment-start="" id="h-/src/lib-Overview"></span>/src/lib<span data-mw-comment-end="h-/src/lib-Overview"></span></h4></div> <p>This is a knockout-related part, handling errors, manage states, and logging, etc. Not as important for pure visualization purposes, but should be kept in mind because it is visualization with JS. </p> <ul><li>Knockout-extensions <ul><li>Knockout-table.js</li> <li>Note: this is the table binding plugin for knockout. Works with require.js. Dan made customized wrap for a proper define.</li></ul></li> <li>Ajax-wrapper.js <ul><li>Note: Can handle custom headers, and handle errors across all requests.</li></ul></li> <li>Logger.js <ul><li>Note: because Dashiki is client-side only, so the logger only logs client-side errors. This is a static function that is available site wide.</li></ul></li> <li>Polyfills.js</li> <li>State-manager.js <ul><li>Note: Mutates and translates URL to application state. If the URL has no state, then it falls back to the config api for default setting.</li></ul></li> <li>Window.js <ul><li>Note: window as a stand alone mode, usually useful in testing.</li></ul></li></ul> <div class="mw-heading mw-heading3"><h3 id="Test_your_dashboard_config_locally" data-mw-thread-id="h-Test_your_dashboard_config_locally-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"><span data-mw-comment-start="" id="h-Test_your_dashboard_config_locally-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span>Test your dashboard config locally<span data-mw-comment-end="h-Test_your_dashboard_config_locally-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span></h3></div> <div class="mw-heading mw-heading4"><h4 id="Setup" data-mw-thread-id="h-Setup-Test_your_dashboard_config_locally"><span data-mw-comment-start="" id="h-Setup-Test_your_dashboard_config_locally"></span>Setup<span data-mw-comment-end="h-Setup-Test_your_dashboard_config_locally"></span></h4></div> <p>Note: In addition to install gulp, you also need to install bower globally, then install bower locally in your directory. </p><p>Clone dashiki depot: </p> <pre>git clone ssh://<user>@gerrit.wikimedia.org:29418/analytics/dashiki </pre><p> Install npm dependencies</p><div class="mw-highlight mw-highlight-lang-shell mw-content-ltr" dir="ltr"><pre><span></span>npm<span class="w"> </span>install </pre></div><p> When prompted with <i>It looks like you have a semantic.json file already,</i> select "Yes, extend my current settings". Then install gulp and semantic:</p><div class="mw-highlight mw-highlight-lang-shell mw-content-ltr" dir="ltr"><pre><span></span>sudo<span class="w"> </span>npm<span class="w"> </span>install<span class="w"> </span>-g<span class="w"> </span>gulp <span class="nb">cd</span><span class="w"> </span>semantic gulp<span class="w"> </span>build </pre></div><p>Example building your own dashboard locally for testing with gulp: </p><p>Go to the root where you have cloned dashiki and do: </p> <pre>python -m SimpleHTTPServer 5000 </pre> <p>You have now webserver on port 5000, going to <a rel="nofollow" class="external free" href="http://localhost:5000">http://localhost:5000</a> should display a page </p><p>Build dashiki now with some test configuration: </p> <div class="mw-highlight mw-highlight-lang-python mw-content-ltr" dir="ltr"><pre><span></span><span class="n">gulp</span> <span class="o">--</span><span class="n">layout</span> <span class="n">metrics</span><span class="o">-</span><span class="n">by</span><span class="o">-</span><span class="n">project</span> <span class="o">--</span><span class="n">config</span> <span class="n">Dashiki</span><span class="p">:</span><span class="n">VitalSigns</span> </pre></div> <p>Browse to http://localhost:5000/dist/metrics-by-project-VitalSigns </p><p>Alternatively, browse to localhost:5000, from the /dist directory, navigate to the dashboard. </p> <div class="mw-heading mw-heading3"><h3 id="On-wiki_configuration" data-mw-thread-id="h-On-wiki_configuration-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"><span data-mw-comment-start="" id="h-On-wiki_configuration-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span>On-wiki configuration<span data-mw-comment-end="h-On-wiki_configuration-Technical_Documentation:_Understanding_Dashiki_-_First_Steps"></span></h3></div> <p>Dashiki dashboards are configured via wiki pages. Here I will walk through a couple minimal working examples (MWE) to illustrate how Dashiki configuration works. </p> <div class="mw-heading mw-heading4"><h4 id="Configuring_the_metrics-by-project_layout" data-mw-thread-id="h-Configuring_the_metrics-by-project_layout-On-wiki_configuration"><span data-mw-comment-start="" id="h-Configuring_the_metrics-by-project_layout-On-wiki_configuration"></span>Configuring the metrics-by-project layout<span data-mw-comment-end="h-Configuring_the_metrics-by-project_layout-On-wiki_configuration"></span></h4></div> <p>The metrics-by-project layout uses 2 configuration files that you will want to edit: </p> <ul><li><a class="external text" href="https://meta.wikimedia.org/wiki/Dashiki:CategorizedMetrics">Dashiki:CategorizedMetrics</a></li> <li>And your dashboard's own config page</li></ul> <p>Dashiki:CategorizedMetrics looks like this: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"categorizedMetrics"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"categoryName1"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"metrics"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="err">...</span><span class="p">],</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"categoryName2"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"metrics"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="err">...</span><span class="p">]</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="err">...</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <p>ATTENTION: If you introduce a syntax error in this page, all metrics-by-project dashboards will stop working. So, be careful ;). Oh, and BTW, if the metric that you want to display is already in Dashiki:CategorizedMetrics, then you don't need to change this page! Find a category that suits your metric or create a new one. Then, add a new metric config object to the "metrics" array. The config code depends on the data api that you want to use: </p> <div class="mw-heading mw-heading5"><h5 id="With_AQS_API" data-mw-thread-id="h-With_AQS_API-Configuring_the_metrics-by-project_layout"><span data-mw-comment-start="" id="h-With_AQS_API-Configuring_the_metrics-by-project_layout"></span>With AQS API<span data-mw-comment-end="h-With_AQS_API-Configuring_the_metrics-by-project_layout"></span></h5></div> <p>The AQS API lets you grab data from AQS and display it in a graph. If you plan to pull data from that API, then your metric config should look like: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"definition"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://meta.wikimedia.org/wiki/Research:Unique_Devices"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"MonthlyUniqueDevices"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"displayName"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Monthly Unique Devices"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"api"</span><span class="p">:</span><span class="w"> </span><span class="s2">"aqsApi"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"breakdown"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"columns"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="s2">"All"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Desktop site"</span><span class="p">,</span><span class="w"> </span><span class="s2">"Mobile site"</span><span class="p">]</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nt">"granularity"</span><span class="p">:</span><span class="w"> </span><span class="s2">"monthly"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"annotations"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"host"</span><span class="p">:</span><span class="w"> </span><span class="s2">"meta.wikimedia.org"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"pageName"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashiki:MonthlyUniqueDevicesAnnotations"</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <p>So let’s take it step by step: </p> <ul><li>definition: link to a wiki that defines the metric in plain English</li> <li>name: this is the field that tells Dashiki which data to show in the graph. It must contain a name defined in https://github.com/wikimedia/analytics-dashiki/blob/master/src/app/config.js#L53</li> <li>displayName: just the friendly name to show in the UI</li> <li>api: in this case we would use "aqsApi". If you omit it, it defaults to "wikimetrics", and you can set it to "datasets" as well: https://github.com/wikimedia/analytics-dashiki/blob/master/src/app/apis/api-finder.js#L25.</li> <li>breakdown: if you want to show the metric breakdown selector, you can specify it here. Note that the API should support the chosen breakdown beforehand.</li> <li>granularity: specify the time granularity (hourly, daily, monthly). Also check that the endpoint that you're querying has the chosen granularity.</li> <li>annotations: link to a wiki page that defines annotations for this metric, for example https://meta.wikimedia.org/wiki/Dashiki:MonthlyUniqueDevicesAnnotations. Look at next section for an example.</li></ul> <div class="mw-heading mw-heading5"><h5 id="With_datasets_API" data-mw-thread-id="h-With_datasets_API-Configuring_the_metrics-by-project_layout"><span data-mw-comment-start="" id="h-With_datasets_API-Configuring_the_metrics-by-project_layout"></span>With datasets API<span data-mw-comment-end="h-With_datasets_API-Configuring_the_metrics-by-project_layout"></span></h5></div> <p>Let’s look at a datasets example. These are report files stored in https://analytics.wikimedia.org/datasets/periodic/reports/metrics. All those report files have the same format conventions and usually are generated by <a class="external text" href="https://wikitech.wikimedia.org/wiki/Analytics/Systems/Reportupdater">reportupdater</a>. You can configure a dashboard to grab data from them by using a metric config like: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"definition"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://meta.wikimedia.org/wiki/Analytics/Metrics/Uploads"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"name"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Uploads"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"metric"</span><span class="p">:</span><span class="w"> </span><span class="s2">"multimedia-health"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"submetric"</span><span class="p">:</span><span class="w"> </span><span class="s2">"uploads"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"api"</span><span class="p">:</span><span class="w"> </span><span class="s2">"datasets"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"annotations"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"host"</span><span class="p">:</span><span class="w"> </span><span class="s2">"meta.wikimedia.org"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"pageName"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashiki:MultimediaHealthUploads"</span> <span class="w"> </span><span class="p">}</span> <span class="p">}</span> </pre></div> <p>In this case the properties are (the ones left out behave the same as in previous examples): </p> <ul><li>"name": just the friendly name to show in the UI</li> <li>“metric”: the top level folder to look for data in the datasets server</li> <li>“submetric”: the subfolder to look for data inside the former folder</li></ul> <p>So, using the datasets api, you will have to specify a “metric” and “submetric” property that will be used to look for your data in a convention-based path: https://analytics.wikimedia.org/datasets/periodic/reports/metrics/{metric}/{submetric}. </p> <div class="mw-heading mw-heading5"><h5 id="The_dashboard's_own_config_page" data-mw-thread-id="h-The_dashboard's_own_config_page-Configuring_the_metrics-by-project_layout"><span id="The_dashboard.27s_own_config_page"></span><span data-mw-comment-start="" id="h-The_dashboard's_own_config_page-Configuring_the_metrics-by-project_layout"></span>The dashboard's own config page<span data-mw-comment-end="h-The_dashboard's_own_config_page-Configuring_the_metrics-by-project_layout"></span></h5></div> <p>In addition to Dashiki:CategorizedMetrics, you also want to create/edit a config page that will tell dashiki which metrics to show. You should name it <code>Config:Dashiki:{YourDashboardName}</code>. Please without spaces or underscores, and all words' first letters capitalized, like in ExampleDashboardName. The contents of the page should be: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"defaultProjects"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"enwiki"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"eswiki"</span><span class="p">,</span> <span class="w"> </span><span class="err">...</span> <span class="w"> </span><span class="s2">"zhwiki"</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nt">"defaultMetrics"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"Pageviews"</span> <span class="w"> </span><span class="p">],</span> <span class="w"> </span><span class="nt">"metrics"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s2">"Pageviews"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"UniqueDevices"</span><span class="p">,</span> <span class="w"> </span><span class="s2">"MonthlyUniqueDevices"</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <ul><li>defaultProjects: The projects you want the dashboard to show at first load</li> <li>defaultMetrics: The metrics you want the dashboard to open at first load</li> <li>metrics: The metrics you want the dashboard to provide for the user to choose</li></ul> <p>Of course, all metrics should be defined in the previous Dashiki:CategorizedMetrics file. </p><p><br/> </p> <div class="mw-heading mw-heading4"><h4 id="Configuring_the_tabs_layout" data-mw-thread-id="h-Configuring_the_tabs_layout-On-wiki_configuration"><span data-mw-comment-start="" id="h-Configuring_the_tabs_layout-On-wiki_configuration"></span>Configuring the tabs layout<span data-mw-comment-end="h-Configuring_the_tabs_layout-On-wiki_configuration"></span></h4></div> <p>In this layout you only need to create/edit one page that will give dashiki all necessary information to render your dashboard. The page should be named <code>Config:Dashiki:{YourDashboardName}</code>. Please without spaces or underscores, and all words' first letters capitalized, like in ExampleDashboardName. The contents of the page should be: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="nt">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashboard Title"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"subtitle"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashboard Subtitle"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"desc"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashboard description..."</span><span class="p">,</span> <span class="w"> </span><span class="nt">"tabs"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Tab title 1"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"dataRange"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"startDate"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2015-06-01"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nt">"graphs"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Graph title A"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"dygraphs-timeseries"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"path"</span><span class="p">:</span><span class="w"> </span><span class="s2">"path/to/your/report_file.tsv"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"format"</span><span class="p">:</span><span class="w"> </span><span class="s2">"kmb|percent| any other format supported by numeral.js. example '0,0'"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"doNotParse"</span><span class="p">:</span><span class="w"> </span><span class="s2">"column that shouldn't be parsed by Dashiki"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Graph title B"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"type"</span><span class="p">:</span><span class="w"> </span><span class="s2">"hierarchy"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"path"</span><span class="p">:</span><span class="w"> </span><span class="s2">"path/to/your/report_file.tsv"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"pivot"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"dimension"</span><span class="p">:</span><span class="w"> </span><span class="s2">"column-to-pivot-on"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"metric"</span><span class="p">:</span><span class="w"> </span><span class="s2">"column-to-roll-up-as-a-sum-when-pivoting"</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="err">...</span> <span class="w"> </span><span class="p">]</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"title"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Tab title 2"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"dataRange"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"startDate"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2015-06-01"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="nt">"graphs"</span><span class="p">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="err">...</span> <span class="w"> </span><span class="p">]</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">]</span> <span class="p">}</span> </pre></div> <p>The meaning of the fields is pretty much self explanatory except for maybe: </p> <ul><li>startDate: The fist data point to display</li> <li>type: Type of visualization. If the data to display is a timeline, you'll want either "dygraphs-timeseries" (line chart) or "table-timeseries" (interactive table). If the data is well formatted, the "hierarchy" type will graph an interactive sunburst chart.</li> <li>path: The path to the TSV report file, relative to: https://analytics.wikimedia.org/datasets/periodic/reports/metrics/</li></ul> <div class="mw-heading mw-heading4"><h4 id="Configuring_annotations" data-mw-thread-id="h-Configuring_annotations-On-wiki_configuration"><span data-mw-comment-start="" id="h-Configuring_annotations-On-wiki_configuration"></span>Configuring annotations<span data-mw-comment-end="h-Configuring_annotations-On-wiki_configuration"></span></h4></div> <p>All Dashiki line charts support annotations. To add annotations to a graph in your dashboard, you need to create/edit an additional config page. Its name should be <code>Dashiki:{YourMetricName}Annotations</code>. It should look like: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">[</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2016-09-13"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"end"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2016-09-13"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"note"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Whatever you want to annotate to this date"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"start"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-01-05"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"end"</span><span class="p">:</span><span class="w"> </span><span class="s2">"2017-02-07"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"note"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Whatever you want to annotate to this date range"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="err">...</span> <span class="p">]</span> </pre></div> <p>And then you'll need to add a link to that page to your dashboard/metric config. </p> <dl><dt>metrics-by-project layout</dt> <dd>For this layout you should add the link to <code>Dashiki:CategorizedMetrics</code>.</dd> <dt>tabs layout</dt> <dd>For this layout you should add the link to your dashboard's dedicated config page.</dd></dl> <p>In both cases, you should add a subsection inside the metric/graph json object, that looks like this: </p> <div class="mw-highlight mw-highlight-lang-json mw-content-ltr" dir="ltr"><pre><span></span><span class="p">{</span> <span class="w"> </span><span class="err">...</span> <span class="w"> </span><span class="nt">"annotations"</span><span class="p">:</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nt">"host"</span><span class="p">:</span><span class="w"> </span><span class="s2">"meta.wikimedia.org"</span><span class="p">,</span> <span class="w"> </span><span class="nt">"pageName"</span><span class="p">:</span><span class="w"> </span><span class="s2">"Dashiki:YourMetricNameAnnotations"</span> <span class="w"> </span><span class="p">},</span> <span class="w"> </span><span class="err">...</span> <span class="p">}</span> </pre></div> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Background" data-mw-thread-id="h-Background"><span data-mw-comment-start="" id="h-Background"></span>Background<span data-mw-comment-end="h-Background"></span></h2></div> <figure class="mw-default-size mw-halign-center" typeof="mw:File/Thumb"><a href="/wiki/File:The_Dashboarding_Problem.compressed.pdf" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/labs/thumb/4/42/The_Dashboarding_Problem.compressed.pdf/page1-220px-The_Dashboarding_Problem.compressed.pdf.jpg" decoding="async" width="220" height="124" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/labs/thumb/4/42/The_Dashboarding_Problem.compressed.pdf/page1-330px-The_Dashboarding_Problem.compressed.pdf.jpg 1.5x, //upload.wikimedia.org/wikipedia/labs/thumb/4/42/The_Dashboarding_Problem.compressed.pdf/page1-440px-The_Dashboarding_Problem.compressed.pdf.jpg 2x" data-file-width="1500" data-file-height="843"/></a><figcaption></figcaption></figure> <p>Dashiki's history and technical stack: </p>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?useformat=desktop&type=1x1&usesul3=0" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://wikitech.wikimedia.org/w/index.php?title=Data_Platform/Systems/Dashiki&oldid=2201864">https://wikitech.wikimedia.org/w/index.php?title=Data_Platform/Systems/Dashiki&oldid=2201864</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:Dashiki" title="Category:Dashiki">Dashiki</a></li><li><a href="/wiki/Category:Data_platform" title="Category:Data platform">Data platform</a></li><li><a href="/wiki/Category:Data_platform_systems" title="Category:Data platform systems">Data platform systems</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 1 July 2024, at 19:55.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. See <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> for details.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Main_Page">About Wikitech</a></li> <li id="footer-places-disclaimers"><a href="https://foundation.wikimedia.org/wiki/General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/wikitech.wikimedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//wikitech.wikimedia.org/w/index.php?title=Data_Platform/Systems/Dashiki&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" lang="en" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><picture><source media="(min-width: 500px)" srcset="/w/resources/assets/poweredby_mediawiki.svg" width="88" height="31"><img src="/w/resources/assets/mediawiki_compact.svg" alt="Powered by MediaWiki" width="25" height="25" loading="lazy"></picture></a></li> </ul> </footer> </div> </div> </div> <div class="vector-header-container vector-sticky-header-container"> <div id="vector-sticky-header" class="vector-sticky-header"> <div class="vector-sticky-header-start"> <div class="vector-sticky-header-icon-start vector-button-flush-left vector-button-flush-right" aria-hidden="true"> <button class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-sticky-header-search-toggle" tabindex="-1" data-event-name="ui.vector-sticky-search-form.icon"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </button> </div> <div role="search" class="vector-search-box-vue vector-search-box-show-thumbnail vector-search-box"> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail"> <form action="/w/index.php" id="vector-sticky-search-form" class="cdx-search-input cdx-search-input--has-end-button"> <div class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikitech"> <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <div class="vector-sticky-header-context-bar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-sticky-header-toc" class="vector-dropdown mw-portlet mw-portlet-sticky-header-toc vector-sticky-header-toc vector-button-flush-left" > <input type="checkbox" id="vector-sticky-header-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-sticky-header-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-sticky-header-toc-label" for="vector-sticky-header-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-sticky-header-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div class="vector-sticky-header-context-bar-primary" aria-hidden="true" ><span class="mw-page-title-main">Data Platform/Systems/Dashiki</span></div> </div> </div> <div class="vector-sticky-header-end" aria-hidden="true"> <div class="vector-sticky-header-icons"> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-talk-sticky-header" tabindex="-1" data-event-name="talk-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbles mw-ui-icon-wikimedia-speechBubbles"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-subject-sticky-header" tabindex="-1" data-event-name="subject-sticky-header"><span class="vector-icon mw-ui-icon-article mw-ui-icon-wikimedia-article"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-history-sticky-header" tabindex="-1" data-event-name="history-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-history mw-ui-icon-wikimedia-wikimedia-history"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only mw-watchlink" id="ca-watchstar-sticky-header" tabindex="-1" data-event-name="watch-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-star mw-ui-icon-wikimedia-wikimedia-star"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-edit-sticky-header" tabindex="-1" data-event-name="wikitext-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-wikiText mw-ui-icon-wikimedia-wikimedia-wikiText"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-ve-edit-sticky-header" tabindex="-1" data-event-name="ve-edit-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-edit mw-ui-icon-wikimedia-wikimedia-edit"></span> <span></span> </a> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only" id="ca-viewsource-sticky-header" tabindex="-1" data-event-name="ve-edit-protected-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-editLock mw-ui-icon-wikimedia-wikimedia-editLock"></span> <span></span> </a> </div> <div class="vector-sticky-header-buttons"> <button class="cdx-button cdx-button--weight-quiet mw-interlanguage-selector" id="p-lang-btn-sticky-header" tabindex="-1" data-event-name="ui.dropdown-p-lang-btn-sticky-header"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>Add languages</span> </button> <a href="#" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive" id="ca-addsection-sticky-header" tabindex="-1" data-event-name="addsection-sticky-header"><span class="vector-icon mw-ui-icon-speechBubbleAdd-progressive mw-ui-icon-wikimedia-speechBubbleAdd-progressive"></span> <span>Add topic</span> </a> </div> <div class="vector-sticky-header-icon-end"> <div class="vector-user-links"> </div> </div> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-b766959bd-qdhph","wgBackendResponseTime":83,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Quickstart","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Tutorial-Quickstart","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Intro","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-FAQ","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Where_is_the_code?-FAQ","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Where_is_code_deployed?-FAQ","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-How_do_I_put_dashiki_out_of_service?-FAQ","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Deployment","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-How_to_get_your_data_available_via_http-Deployment","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Can_I_implement_a_new_layout?-Deployment","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-What_about_limn?","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Technical_Documentation:_Understanding_Dashiki_-_First_Steps","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Preface-Technical_Documentation:_Understanding_Dashiki_-_First_Steps","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Overview-Technical_Documentation:_Understanding_Dashiki_-_First_Steps","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-/src/layouts-Overview","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-/src/component-Overview","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-/src/app-Overview","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-/src/lib-Overview","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Test_your_dashboard_config_locally-Technical_Documentation:_Understanding_Dashiki_-_First_Steps","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Setup-Test_your_dashboard_config_locally","replies":[]}]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-On-wiki_configuration-Technical_Documentation:_Understanding_Dashiki_-_First_Steps","replies":[{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Configuring_the_metrics-by-project_layout-On-wiki_configuration","replies":[{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-With_AQS_API-Configuring_the_metrics-by-project_layout","replies":[]},{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-With_datasets_API-Configuring_the_metrics-by-project_layout","replies":[]},{"headingLevel":5,"name":"h-","type":"heading","level":0,"id":"h-The_dashboard's_own_config_page-Configuring_the_metrics-by-project_layout","replies":[]}]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Configuring_the_tabs_layout-On-wiki_configuration","replies":[]},{"headingLevel":4,"name":"h-","type":"heading","level":0,"id":"h-Configuring_annotations-On-wiki_configuration","replies":[]}]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Background","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.033"},"limitreport":{"cputime":"0.119","walltime":"0.667","ppvisitednodes":{"value":357,"limit":1000000},"postexpandincludesize":{"value":12358,"limit":2097152},"templateargumentsize":{"value":6399,"limit":2097152},"expansiondepth":{"value":7,"limit":100},"expensivefunctioncount":{"value":10,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":18672,"limit":5000000},"timingprofile":["100.00% 16.965 1 -total","100.00% 16.965 1 Template:Navigation_Data_Platform"," 87.96% 14.923 1 Template:Navigation_sidebar"]},"cachereport":{"origin":"mw-web.codfw.main-b766959bd-htvg6","timestamp":"20250214040012","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>