[{"data":1,"prerenderedAt":788},["ShallowReactive",2],{"bootstrap":3,"blog-build-a-business-dashboard-with-retool-and-the-commerce-layer-metrics-api":277},{"navigation":4,"globalConfig":196,"forms":218},{"headerSections":5,"headerFooterLinks":67,"footer":76,"legalLinks":153,"socialLinks":176},[6,39,44,50,57,62],{"hasSubMenu":7,"title":8,"links":9,"columns":38},true,"Product",[10,20,26,32],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":16,"openForm":11},false,"navigation_link","Universal checkout","Sell anywhere","globe-simple",{"_modelApiKey":17,"slug":18,"title":19},"page","universal-checkout","Universal Checkout",{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":24,"openForm":11},"Distributed OMS","Manage orders","package",{"_modelApiKey":17,"slug":25,"title":21},"distributed-oms",{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":30,"openForm":11},"Promotion engine","Automated discounts","seal-percent",{"_modelApiKey":17,"slug":31,"title":27},"promotion-engine",{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":36,"openForm":11},"POS system","Operate stores","devices",{"_modelApiKey":17,"slug":37,"title":33},"pos-system",2,{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":41,"openForm":11,"title":40},"Pricing",{"_modelApiKey":42,"slug":43},"pricing_page","pricing",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":46,"openForm":11,"title":45},"Customers",{"_modelApiKey":47,"slug":48,"title":49},"customer_landing_page","customers","Customers page",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":52,"openForm":11,"form":54,"title":51},"Partners",{"_modelApiKey":17,"slug":53,"title":51},"partners",{"_modelApiKey":55,"slug":53,"name":56},"form","PartnersForm",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":58,"label":59,"isExternal":7,"url":60,"openForm":11,"title":61},"Docs Hub","Learn more","https:\u002F\u002Fdocs.commercelayer.io\u002F","Docs",{"hasSubMenu":11,"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":64,"openForm":11,"title":63},"Blog",{"_modelApiKey":65,"slug":66},"blog_landing_page","blog",[68,72],{"text":69,"link":70},"Sign in",{"_modelApiKey":12,"text":69,"isExternal":7,"url":71,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_in",{"text":73,"link":74},"Sign up for free",{"_modelApiKey":12,"text":73,"isExternal":7,"url":75,"openForm":11},"https:\u002F\u002Fdashboard.commercelayer.io\u002Fsign_up",[77,89,109,132],{"hasSubMenu":7,"title":8,"links":78},[79,81,83,85,87],{"showTag":11,"_modelApiKey":12,"text":13,"subtitle":14,"icon":15,"isExternal":11,"link":80,"openForm":11},{"_modelApiKey":17,"slug":18,"title":19},{"showTag":11,"_modelApiKey":12,"text":21,"subtitle":22,"icon":23,"isExternal":11,"link":82,"openForm":11},{"_modelApiKey":17,"slug":25,"title":21},{"showTag":11,"_modelApiKey":12,"text":27,"subtitle":28,"icon":29,"isExternal":11,"link":84,"openForm":11},{"_modelApiKey":17,"slug":31,"title":27},{"showTag":11,"_modelApiKey":12,"text":33,"subtitle":34,"icon":35,"isExternal":11,"link":86,"openForm":11},{"_modelApiKey":17,"slug":37,"title":33},{"showTag":11,"_modelApiKey":12,"text":40,"isExternal":11,"link":88,"openForm":11},{"_modelApiKey":42,"slug":43},{"hasSubMenu":7,"title":90,"links":91},"Resources",[92,94,99,104,107],{"showTag":11,"_modelApiKey":12,"text":93,"isExternal":7,"url":60,"openForm":11},"Documentation",{"showTag":11,"_modelApiKey":12,"text":95,"label":95,"isExternal":11,"link":96,"openForm":11},"Agentic Commerce",{"_modelApiKey":17,"slug":97,"title":98},"agentic-commerce-whitepaper","Agentic Commerce Whitepaper",{"showTag":11,"_modelApiKey":12,"text":100,"isExternal":11,"link":101,"openForm":11},"Core concepts",{"_modelApiKey":17,"slug":102,"title":103},"headless-commerce","Headless commerce",{"showTag":11,"_modelApiKey":12,"text":105,"isExternal":7,"url":106,"openForm":11},"Changelog","https:\u002F\u002Fdocs.commercelayer.io\u002Fchangelog\u002F",{"showTag":11,"_modelApiKey":12,"text":63,"isExternal":11,"link":108,"openForm":11},{"_modelApiKey":65,"slug":66},{"hasSubMenu":7,"title":110,"links":111},"Company",[112,116,118,121,126],{"showTag":11,"_modelApiKey":12,"text":113,"isExternal":11,"link":114,"openForm":11},"Vision",{"_modelApiKey":17,"slug":115,"title":113},"vision",{"showTag":11,"_modelApiKey":12,"text":45,"isExternal":11,"link":117,"openForm":11},{"_modelApiKey":47,"slug":48,"title":49},{"showTag":11,"_modelApiKey":12,"text":51,"isExternal":11,"link":119,"openForm":11,"form":120},{"_modelApiKey":17,"slug":53,"title":51},{"_modelApiKey":55,"slug":53,"name":56},{"showTag":11,"_modelApiKey":12,"text":122,"isExternal":11,"link":123,"openForm":11},"Security",{"_modelApiKey":17,"slug":124,"title":125},"security","Security at Commerce Layer",{"showTag":11,"_modelApiKey":12,"text":127,"label":128,"isExternal":11,"openForm":7,"form":129},"Giveback","Giveback program",{"_modelApiKey":55,"slug":130,"name":131},"giveback","GivebackForm",{"hasSubMenu":7,"title":133,"links":134},"Get in touch",[135,140,145,149],{"showTag":11,"_modelApiKey":12,"text":136,"isExternal":11,"openForm":7,"form":137},"Contact",{"_modelApiKey":55,"slug":138,"name":139},"contact","ContactUsForm",{"showTag":11,"_modelApiKey":12,"text":141,"isExternal":11,"openForm":7,"form":142},"Book a demo",{"_modelApiKey":55,"slug":143,"name":144},"demo","RequestDemoForm",{"showTag":11,"_modelApiKey":12,"text":146,"label":147,"isExternal":7,"url":148,"openForm":11},"Support","Email support","mailto:support@commercelayer.io",{"showTag":11,"_modelApiKey":12,"text":150,"label":151,"isExternal":7,"url":152,"openForm":11},"Community","Discord community","https:\u002F\u002Fdiscord.gg\u002Fcommercelayer",{"hasSubMenu":7,"title":154,"links":155},"Legal",[156,161,165,169,173],{"showTag":11,"_modelApiKey":12,"text":157,"label":158,"isExternal":7,"url":159,"openForm":11,"htmlClassNames":160},"Terms","Terms and conditions","\u002Flegal-embed\u002Fterms-of-service","iubenda-nostyle no-brand iubenda-noiframe iubenda-embed",{"showTag":11,"_modelApiKey":12,"text":162,"label":163,"isExternal":7,"url":164,"openForm":11,"htmlClassNames":160},"Privacy","Privacy policy","\u002Flegal-embed\u002Fprivacy-policy",{"showTag":11,"_modelApiKey":12,"text":166,"label":167,"isExternal":7,"url":168,"openForm":11,"htmlClassNames":160},"Cookies","Cookie policy","\u002Flegal-embed\u002Fcookie-policy",{"showTag":11,"_modelApiKey":12,"text":170,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":172},"Notice at collection","#","iubenda-cs-uspr-link",{"showTag":11,"_modelApiKey":12,"text":174,"isExternal":7,"url":171,"openForm":11,"htmlClassNames":175},"Privacy preferences","iubenda-cs-preferences-link",[177,180,184,188,192],{"title":178,"type":179,"url":152,"isExternal":7},"Discord","discord-logo",{"title":181,"type":182,"url":183,"isExternal":7},"Github","github","https:\u002F\u002Fgithub.com\u002Fcommercelayer",{"title":185,"type":186,"url":187,"isExternal":7},"Bluesky","bluesky-logo","https:\u002F\u002Fbsky.app\u002Fprofile\u002Fcommercelayer.io",{"title":189,"type":190,"url":191,"isExternal":7},"X","x-logo","https:\u002F\u002Fx.com\u002Fcommercelayer",{"title":193,"type":194,"url":195,"isExternal":7},"LinkedIn","linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fcommerce-layer",{"pagesWithoutCtaPanel":197,"ctaPanel":198,"notification":208,"showApiResponseTime":11,"newsletterSignup":216},[],{"title":199,"subtitle":200,"ctas":201},"Ready to get started?","Discover how we can help your business.",[202,205],{"_modelApiKey":203,"text":204,"isExternal":7,"url":75,"openForm":11},"link","Get started for free",{"_modelApiKey":203,"text":206,"isExternal":11,"openForm":7,"form":207},"Contact us",{"_modelApiKey":55,"slug":138,"name":139},{"showNotification":7,"link":209,"linkText":210,"text":215},{"_modelApiKey":203,"text":210,"isExternal":11,"link":211,"openForm":11},"Read article",{"_modelApiKey":212,"slug":213,"title":214},"blog_post","the-new-payments-api-built-for-how-people-pay-now","The new Payments API. Built for how people pay now.","\u003Cp>The new Payments API. Built for how people pay now.\u003C\u002Fp>\n",{"ctaText":217},"Subscribe",[219,225,229,236,240,246,249,253,261,262,267,272,274],{"_modelApiKey":55,"slug":220,"pardotFormEmbedCode":221,"formEmbedMinHeight":222,"successTitle":223,"successCopy":224},"agentic-commerce","https:\u002F\u002Fcommercelayer.fillout.com\u002Ft\u002F5w4Khwgxr6us?whitepaper=agentic",520,"Thank you for your request!","We’ll be in touch soon to arrange a date and time for your personalized demo.",{"_modelApiKey":55,"slug":226,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"successTitle":223,"successCopy":224},"shopify","https:\u002F\u002Fform.fillout.com\u002Ft\u002FgVnLSmKZwRus",850,{"_modelApiKey":55,"slug":130,"pardotFormEmbedCode":230,"formEmbedMinHeight":231,"displayTitle":232,"copy":233,"successTitle":234,"successCopy":235},"https:\u002F\u002Fform.fillout.com\u002Ft\u002FmVDF8aAiofus",500,"We give back.","\u003Cp>Part of Commerce Layer's company ethos is to empathize and support one another: co-workers, customers, and community. We want to do our part to help nonprofit organizations and small businesses who may feel adversely affected by the current global economic climate, and as a result, need in-kind support to reach their customers.\u003C\u002Fp>\n\n\u003Cp>If this general description matches your organization’s needs, please tell us your story by completing the following form so we can consider helping your cause.\u003C\u002Fp>\n","Thank you!","We will contact you soon to learn more about your story.",{"_modelApiKey":55,"slug":237,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":238,"copy":239},"book-an-onboarding-session","Book an onboarding session","\u003Cp>Schedule some time and our devs will help you set up a Commerce Layer + Sanity store.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":241,"pardotFormEmbedCode":242,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-our-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ComposableCommerce",450,"Download our whitepaper.","Check your inbox. You should receive a download link soon.",{"_modelApiKey":55,"slug":247,"pardotFormEmbedCode":248,"formEmbedMinHeight":243,"displayTitle":244,"successTitle":234,"successCopy":245},"download-the-content-and-commerce-whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=ContentAndCommerce",{"_modelApiKey":55,"slug":250,"pardotFormEmbedCode":251,"formEmbedMinHeight":243,"displayTitle":244,"copy":252,"successTitle":234,"successCopy":245},"whitepaper","https:\u002F\u002Fform.fillout.com\u002Ft\u002F5YPWmy8oT7us?whitepaper=Jamstack","\u003Cp>Commerce Layer is the perfect platform for building commerce on the Jamstack. Convert any design into pixel perfect HTML pages. Connect a best-of-breed headless CMS. Go serverless and forget the hassle of managing complex infrastructures.\u003C\u002Fp>\n",{"_modelApiKey":55,"slug":254,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},"contact-links","https:\u002F\u002Fform.fillout.com\u002Ft\u002FeWPyhHGHT7us",750,"Contact us.","\u003Cp>Tell us about your project. Our team will reach out to you for a personalized offer.\u003C\u002Fp>\n","Thanks for your message!","We’ll be in touch soon to discuss your project details.",{"_modelApiKey":55,"slug":138,"pardotFormEmbedCode":255,"formEmbedMinHeight":256,"displayTitle":257,"copy":258,"successTitle":259,"successCopy":260},{"_modelApiKey":55,"slug":263,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":264,"successTitle":265,"successCopy":266},"demo-embed","Want to see it in action? Request a demo.","Thanks for your request!","We’ll be in touch soon to arrange a date and time for your free live demo.",{"_modelApiKey":55,"slug":53,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"https:\u002F\u002Fform.fillout.com\u002Ft\u002F9MTkDWMUSqus","Become our partner.","\u003Cp>Join us and get our guidance in helping your clients succeed. Our partners are our ambassadors. We are committed to your success as much as you are.\u003C\u002Fp>\n","We will contact you soon to discuss the details of our partnership.",{"_modelApiKey":55,"slug":273,"pardotFormEmbedCode":268,"formEmbedMinHeight":228,"displayTitle":269,"copy":270,"successTitle":234,"successCopy":271},"partners-embed",{"_modelApiKey":55,"slug":143,"pardotFormEmbedCode":227,"formEmbedMinHeight":228,"displayTitle":275,"copy":276,"successTitle":265,"successCopy":266},"Get a free live demo.","\u003Cp>Get a personalized demo and learn more about what Commerce Layer can do for your company.\u003C\u002Fp>\n",{"_modelApiKey":212,"link":278,"subtitle":283,"date":283,"author":284,"additionalAuthors":294,"icon":295,"abstract":296,"tag":297,"displayTitle":279,"cardRatio":300,"featured":11,"seoMetaTags":301,"layout":365,"blogPostCarousel":660,"_seoMetaTags":749,"authors":783},{"text":279,"isExternal":11,"url":280,"link":281},"Build a business dashboard with Retool and the Commerce Layer Metrics API.","",{"_modelApiKey":212,"slug":282},"build-a-business-dashboard-with-retool-and-the-commerce-layer-metrics-api","February 20, 2024",{"name":285,"picture":286},"Fabrizio Picca",{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":291,"customData":293},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1614875259-commercelayeravatarsquare113f26.png","Fabrizio Picca —      Partnerships Manager at Commerce Layer",1280,"png",{"x":292,"y":292},0.5,{},[],"chart-line","Our Metrics API is a powerful resource used to measure the health of a business. Coupled with Retool, you can visualize your sales data to gain better insights into the health of your business.",{"color":298,"name":299},"gray","Tutorials","portrait",[302,306,310,313,317,320,323,327,331,335,338,342,346,350,354,357,361],{"attributes":303,"tag":304,"content":305},null,"title","Create business dashboards with our Metrics API and Retool",{"attributes":307,"tag":309,"content":303},{"property":308,"content":305},"og:title","meta",{"attributes":311,"tag":309,"content":303},{"name":312,"content":305},"twitter:title",{"attributes":314,"tag":309,"content":303},{"name":315,"content":316},"description","Use Commerce's Layer Metrics API and Retool to build data visualizations so you can study all of your orders and gain insights into the health of your sales.",{"attributes":318,"tag":309,"content":303},{"property":319,"content":316},"og:description",{"attributes":321,"tag":309,"content":303},{"name":322,"content":316},"twitter:description",{"attributes":324,"tag":309,"content":303},{"property":325,"content":326},"og:image","https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708432580-cl_retool-dashboard-02.jpg?auto=format&fit=max&w=1200",{"attributes":328,"tag":309,"content":303},{"property":329,"content":330},"og:image:width","1200",{"attributes":332,"tag":309,"content":303},{"property":333,"content":334},"og:image:height","630",{"attributes":336,"tag":309,"content":303},{"name":337,"content":326},"twitter:image",{"attributes":339,"tag":309,"content":303},{"property":340,"content":341},"og:locale","en",{"attributes":343,"tag":309,"content":303},{"property":344,"content":345},"og:type","article",{"attributes":347,"tag":309,"content":303},{"property":348,"content":349},"og:site_name","Commerce Layer",{"attributes":351,"tag":309,"content":303},{"property":352,"content":353},"article:modified_time","2025-10-08T16:30:25Z",{"attributes":355,"tag":309,"content":303},{"property":356,"content":280},"article:publisher",{"attributes":358,"tag":309,"content":303},{"name":359,"content":360},"twitter:card","summary_large_image",{"attributes":362,"tag":309,"content":303},{"name":363,"content":364},"twitter:site","@commercelayer",[366,372,383,386,397,400,410,414,424,427,437,440,450,453,463,466,475,478,488,491,496,499,509,512,514,517,519,522,532,535,545,548,557,560,569,572,581,584,593,596,598,601,610,613,615,618,628,631,640,643,645,648,657],{"_modelApiKey":367,"copy":368,"listStyle":369,"darkTheme":11,"buttons":370,"color":371,"indent":7},"wysiwyg","\u003Ch3>Introduction\u003C\u002Fh3>\n\n\u003Cp>A few months ago, one of our customers asked us if we could help them answer a question that had been on their minds for a long time. Were their customers first-time buyers or return purchasers of their core product? They wanted a deeper understanding of their customer segments and how their business was growing. Furthermore, the answer to this question would help them plan new sales tactics like promotions that targeted returning versus new buyers. So we pointed them to the \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fmetrics\u002F\">Metrics API\u003C\u002Fa> and helped them access their sales data so they could study customer orders.\u003C\u002Fp>\n\n\u003Cp>This story describes just one of the many uses of the Metrics API. It is a powerful resource you can use to measure the state of your operations. You can use it to\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Create your own organization reports\u003C\u002Fli>\n\u003Cli>Set up metric-based alerts\u003C\u002Fli>\n\u003Cli>Send metric data to any open-source or in-house developed tool, library, or framework \u003C\u002Fli>\n\u003Cli>Build custom metrics dashboards\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>These bullets set us up perfectly for the purpose of this post. We've integrated the Metrics API with \u003Ca href=\"https:\u002F\u002Fretool.com\u002F\">Retool\u003C\u002Fa>, a powerful tool they describe as "the fastest way to develop effective softeware". We use Retool to create a dashboard that not only presents data in a user-friendly manner, but also allows for real-time tracking and analysis.\u003C\u002Fp>\n\n\u003Cp>In today's data-driven business environment, visualizing data through dashboards is crucial. Dashboards provide a clear and concise view of business metrics and KPIs, enabling better decision-making. This tutorial guides you through how to make dashboards using Commerce Layer’s Metrics API, providing you with the data views you need to make informed business decisions.\u003C\u002Fp>\n\n\u003Ch3>The Goal: Implement a dashboard with Retool that displays Commerce Layer Metrics API data\u003C\u002Fh3>\n\n\u003Cp>Our goal is straightforward: Build a dashboard to visualize data coming from Commerce Layer Metrics API. To do this, we will set up a new dashboard application in Retool and we will create queries to fetch data from the Metrics API. Our dashboard will take in two parameters \u003Ccode>date_from\u003C\u002Fcode> and \u003Ccode>date_to\u003C\u002Fcode> and will display three metrics:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Number of orders by currency\u003C\u002Fli>\n\u003Cli>Best selling products by market\u003C\u002Fli>\n\u003Cli>Orders by month\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The final result is what you see below in the screenshot below:\u003C\u002Fp>\n","checkbox",[],"red",{"_modelApiKey":373,"border":7,"caption":374,"image":375,"size":382,"darkTheme":11,"rounded":7,"color":371},"image_block","A Retool dashboard that visualizes data from the Commerce Layer Metrics API",{"url":376,"alt":377,"title":374,"width":378,"height":379,"format":290,"focalPoint":380,"customData":381},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708089325-business-dashboard-powered-by-the-commerce-layer-metrics-api.png","The image shows a date selection panel followed by Order Metrics data that includes orders by currency and best selling products by market. The final section shows a graph.",2710,1646,{"x":292,"y":292},{},"standard",{"_modelApiKey":367,"copy":384,"listStyle":369,"darkTheme":11,"buttons":385,"color":371,"indent":11},"\u003Cp>Let’s start building!\u003C\u002Fp>\n\n\u003Ch3>Requirements\u003C\u002Fh3>\n\n\u003Cp>Before we dive into the tutorial, let's make sure we have all the necessary requirements in place:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>A Commerce Layer Account: Create one for free simply by clicking the sign up button on this page.\u003C\u002Fli>\n\u003Cli>A Retool Account: It's also free at \u003Ca href=\"https:\u002F\u002Fwww.retool.com\">https:\u002F\u002Fwww.retool.com\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>And that’s everything you will need today to start building your Metrics API dashboards.\u003C\u002Fp>\n\n\u003Ch3>Step-by-step tutorial\u003C\u002Fh3>\n\n\u003Ch4>Step 1: Setting up Commerce Layer environment\u003C\u002Fh4>\n\n\u003Cp>After you've created your Commerce Layer account, follow the \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fdevelopers\u002Fwelcome\u002Fonboarding-tutorial\">Onboarding Tutorial\u003C\u002Fa> that explains how to create an organization and seed it with test data. If you already have an account, you can use an existing organization or create a new one. It's up to you.\u003C\u002Fp>\n\n\u003Cp>Assuming everything goes smoothly, at the end of this step, you will have:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>A Commerce Layer account\u003C\u002Fli>\n\u003Cli>An organization with some data\u003C\u002Fli>\n\u003Cli>The Commerce Layer CLI installed on your computer\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>It’s now time to create a new integration application in Commerce Layer that will be used to access Metrics API data. Inside the Dashboard, click on Applications:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":387,"image":388,"size":396,"darkTheme":11,"rounded":7,"color":371},"Click on Applications within the Dashboard interface",{"url":389,"alt":390,"title":391,"width":392,"height":393,"format":290,"focalPoint":394,"customData":395},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708089961-commerce-layer-dashboard-focusing-in-on-the-applications-section.png","To start this process, you will need to log into your Commerce Layer account and click on the Applications item in the left hand menu.","Commerce Layer Dashboard UI, focusing on the Applications section",2112,1254,{"x":292,"y":292},{},"slim",{"_modelApiKey":367,"copy":398,"listStyle":369,"darkTheme":11,"buttons":399,"color":371,"indent":11},"\u003Cp>Click \u003Cstrong>Add new\u003C\u002Fstrong> as per below:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":401,"image":402,"size":396,"darkTheme":11,"rounded":7,"color":371},"Adding a new application in the Commerce Layer dashboard",{"url":403,"alt":404,"title":405,"width":406,"height":407,"format":290,"focalPoint":408,"customData":409},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708090383-add-new.png","The image shows an Add New element on the right hand of the page. Use it to add a new application within the dashboard.","Add a new application within the Commerce Layer dashboard",2128,1104,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":411,"listStyle":412,"darkTheme":11,"buttons":413,"color":371,"indent":11},"\u003Cp>The Metrics API needs an Integration Application token so let’s create one:\u003C\u002Fp>\n","directional",[],{"_modelApiKey":373,"border":7,"caption":415,"image":416,"size":396,"darkTheme":11,"rounded":7,"color":371},"Create an Integration application and token for the Metrics API",{"url":417,"alt":418,"title":419,"width":420,"height":421,"format":290,"focalPoint":422,"customData":423},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708090651-create-an-intergration-token-for-the-metrics-api.png","The image shows three application types at the top and we are selecting the middle option to create an Integration Application","Create an integration token for the Metrics API",1164,1720,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":425,"listStyle":369,"darkTheme":11,"buttons":426,"color":371,"indent":11},"\u003Cp>Please note that you might want to use a read-only role for this application as it will only read data from the Metrics API. You can also specify an admin role, but as long as this app will be used only to get Metrics API data, we suggest read only.\u003C\u002Fp>\n\n\u003Cp>Now press \u003Cstrong>Get Credentials\u003C\u002Fstrong> and you will be presented with the following page:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":428,"image":429,"size":396,"darkTheme":11,"rounded":7,"color":371},"The application credentials used to configure access to the Metrics API. ",{"url":430,"alt":431,"title":432,"width":433,"height":434,"format":290,"focalPoint":435,"customData":436},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708091346-get-credentials.png","The images shows the resulting screen after clicking on Get Credentials. All of the Integration Application's sensitive information like Client ID, Client secret, and Base endpoint are blocked out.","A new \"Retool Dashboard\" application",2000,3867,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":438,"listStyle":369,"darkTheme":11,"buttons":439,"color":371,"indent":11},"\u003Cp>The Client ID, Client secret, and Base endpoint will be used in the next step to configure access to the Metrics API. And that’s all for Step 1. You are done here. Celebrate momentarily, then let's get back to work.\u003C\u002Fp>\n\n\u003Ch4>Step 2: Creating a new Retool Dashboard\u003C\u002Fh4>\n\n\u003Cp>We are going to setup three things in Retool:\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>A new \u003Cstrong>REST API resource\u003C\u002Fstrong> to connect to Commerce Layer’s Metrics API\u003C\u002Fli>\n\u003Cli>Three \u003Cstrong>queries\u003C\u002Fstrong> that will be used to get data from the REST API resource that we set up\u003C\u002Fli>\n\u003Cli>A \u003Cstrong>web application\u003C\u002Fstrong> that will be our visual dashboard with charts and controls\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003Cp>Let’s begin.\u003C\u002Fp>\n\n\u003Ch4>Setting up a REST API resource in Retool\u003C\u002Fh4>\n\n\u003Cp>From the Retool main page click on “Connect a resource” under the Resources section.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":441,"image":442,"size":382,"darkTheme":11,"rounded":7,"color":371},"Click on Resources to connect the Metrics API",{"url":443,"alt":444,"title":445,"width":446,"height":447,"format":290,"focalPoint":448,"customData":449},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708123905-retool-connect-a-resource.png","The image shows three sections at the top of Retool's dashboard, with a highlighted section that is titled \"Resources\". This is where you click to connect an external resource like the Metrics API.","Retool Dashboard Connect a Resource",2472,1162,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":451,"listStyle":369,"darkTheme":11,"buttons":452,"color":371,"indent":11},"\u003Cp>Select \u003Cstrong>REST API\u003C\u002Fstrong> from the list of available resource templates:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":454,"image":455,"size":382,"darkTheme":11,"rounded":7,"color":371},"Select the REST API option to begin working on the connection.",{"url":456,"alt":457,"title":458,"width":459,"height":460,"format":290,"focalPoint":461,"customData":462},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708124136-rest-api.png","The image shows the first option, REST API, highlighted. Select this option to continue connecting the Metrics API.","Retool Select A Resource type",2040,930,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":464,"listStyle":412,"darkTheme":11,"buttons":465,"color":371,"indent":11},"\u003Cp>Once selected, you will be presented with a form to set up your new REST API resource. The picture below is the setup for my organization. \u003C\u002Fp>\n\n\u003Cp>You can start with the \u003Cstrong>General\u003C\u002Fstrong> section. Choose a \u003Cstrong>Name\u003C\u002Fstrong>  for your dashboard, something like:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>“Commerce Layer Metrics API” (This is the name I use for my setup)\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Then you will need to update the a number of items in the \u003Cstrong>Credentials\u003C\u002Fstrong> section. Start with the \u003Cstrong>Base URL\u003C\u002Fstrong>, using the Metrics API base endpoint from above. This will be something like\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ccode>https:\u002F\u002F<YOUR_ORGANIZATION_SLUG>.commercelayer.io\u002Fmetrics\u002F\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Add the following to the \u003Cstrong>Headers\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Ccode>Authorization: Bearer OAUTH2_TOKEN\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>Content-Type: application\u002Fvnd.api+json\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>Accept: application\u002Fvnd.api.v1+json\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Update the \u003Cstrong>Authentication\u003C\u002Fstrong> section with following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Select from the drop down \u003Cstrong>\u003Cem>OAuth 2.0\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Check the box \u003Cstrong>\u003Cem>Use Client Credential Flow\u003C\u002Fem>\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Set your Access Token URL as \u003Ccode>https:\u002F\u002F<YOUR_ORGANIZATION_SLUG>.commercelayer.io\u002Foauth\u002Ftoken\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set your \u003Cstrong>Client ID\u003C\u002Fstrong> and \u003Cstrong>Client secret\u003C\u002Fstrong> according to the integration application you created in the previous step.\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":373,"border":7,"caption":467,"image":468,"size":382,"darkTheme":11,"rounded":7,"color":371},"Configure a new REST API resource in Retool by inputting the Commerce Layer Metrics API information.",{"url":469,"alt":470,"title":471,"width":433,"height":472,"format":290,"focalPoint":473,"customData":474},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708176913-retool-setup-panel.png","The images shows the Retool setup panel that is used to input the values from the Commerce Layer Metrics API.","Retool setup panel where you input the Commerce Layer Metrics API information.",3735,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":476,"listStyle":369,"darkTheme":11,"buttons":477,"color":371,"indent":11},"\u003Ch4>Setting up queries to fetch data from the Metrics API\u003C\u002Fh4>\n\n\u003Cp>We are setting up three queries, one for each widget we’ll be showing in the dashboard:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>orders by currency\u003C\u002Fli>\n\u003Cli>best selling products by market\u003C\u002Fli>\n\u003Cli>orders by month\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>A full explanation of how the Metrics API works can be found in \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fmetrics\u002F\">our documentation\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>Orders by currency\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>This query uses the \u003Ccode>orders\u002Fbreakdown\u003C\u002Fcode> endpoint. Our \u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fmetrics\u002Fgetting-started\u002Fqueries\u002Fbreakdown\">documentation describes the orders breakown\u003C\u002Fa> as:\u003C\u002Fp>\n\n\u003Cp>"aggregations that summarize your data as metrics based on specific operators or statistics, computed on field values. When performing a breakdown query on the Metrics API endpoint you get in the response the value of the computation (based on the selected \u003Ccode>operator\u003C\u002Fcode>) on the selected \u003Ccode>field\u003C\u002Fcode>, aggregated \u003Ccode>by\u003C\u002Fcode> another field."\u003C\u002Fp>\n\n\u003Cp>To create the query, let’s open the Query Library of Retool and click \u003Cstrong>+New\u003C\u002Fstrong>\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":479,"image":480,"size":382,"darkTheme":11,"rounded":7,"color":371},"Retool's Query Library used to input the orders\u002Fbreakdown query from the Commerce Layer Metrics API.",{"url":481,"alt":482,"title":483,"width":484,"height":485,"format":290,"focalPoint":486,"customData":487},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708177900-new-query-sceren-in-retool.png","The image shows the Retool Query Library where we will inset the orders\u002Fbreakdown query from the Commerce Layer Metrics API.","Retool Query Library",2412,1912,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":489,"listStyle":412,"darkTheme":11,"buttons":490,"color":371,"indent":11},"\u003Cp>In the \u003Cstrong>Resource\u003C\u002Fstrong> field, select the resource you previously created. In this case, we use the Commerce Layer Metrics API. \u003C\u002Fp>\n\n\u003Cp>As \u003Cstrong>Action Type\u003C\u002Fstrong>, use the following:\n- Select \u003Ccode>POST\u003C\u002Fcode> as the method. The default selection is \u003Ccode>Get\u003C\u002Fcode>, as shown in the screenshot.\n- The base URL will be pre-populated when the resource is selected\n- Make the endpoint (next to the base URL) \u003Ccode>orders\u002Fbreakdown\u003C\u002Fcode>\n- Set \u003Cstrong>raw\u003C\u002Fstrong> as the type in the \u003Cstrong>Body\u003C\u002Fstrong> section, and use the below code as the request payload:\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":493,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"code_block","{\n\t\"breakdown\": {\n\t\t\"by\": \"order.currency_code\",\n\t\t\"field\": \"order.id\",\n\t\t\"operator\": \"value_count\",\n\t\t\"sort\": \"desc\",\n\t\t\"limit\": 20\n\t},\n\t\"filter\": {\n\t\t\"order\": {\n\t\t\t\"date_from\": \"{{date_from}}\",\n\t\t\t\"date_to\": \"{{date_to}}\"\n\t\t}\n\t}\n}","json","Standard",{"_modelApiKey":367,"copy":497,"listStyle":412,"darkTheme":11,"buttons":498,"color":371,"indent":11},"\u003Cp>Now let’s analyze the query in more detail. We want the number of orders (\u003Ccode>value_count\u003C\u002Fcode> operator applied on \u003Ccode>order.id\u003C\u002Fcode> field) broken down by \u003Ccode>order.currency_code\u003C\u002Fcode>. By default, the Metrics API returns data from the last month and can’t cover spans longer than a year. We want to filter orders by date, specified by two variables \u003Ccode>{{date_from}}\u003C\u002Fcode> and \u003Ccode>{{date_to}}\u003C\u002Fcode>. These variables will be filled by the input fields we will create on the dashboard in the next step. The result should look something like this:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":500,"image":501,"size":382,"darkTheme":11,"rounded":7,"color":371},"The Metrics API orders breakdown query",{"url":502,"alt":503,"title":504,"width":505,"height":506,"format":290,"focalPoint":507,"customData":508},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708178528-orders-breakdown-metrics-api-query.png","A new query of the Metrics API that shows the orders breakdown.","Metrics API orders breakdown query",2406,2370,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":510,"listStyle":412,"darkTheme":11,"buttons":511,"color":371,"indent":11},"\u003Cp>\u003Cstrong>Best selling products by Market\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>Similar to what we just did, we have to create another query on the \u003Ccode>orders\u002Fbreakdown\u003C\u002Fcode> endpoint. This time, use the payload below:\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":513,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"{\n    \"breakdown\": {\n      \"by\": \"market.name\",\n      \"field\": \"order.id\",\n      \"operator\": \"value_count\",\n      \"sort\": \"desc\",\n      \"limit\": 100,\n      \"breakdown\": {\n        \"by\": \"line_items.name\",\n        \"field\": \"order.id\",\n        \"operator\": \"value_count\",\n        \"sort\": \"desc\",\n        \"limit\": 5\n      }\n    },\n    \"filter\": {\n      \"order\": {\n        \"date_from\": {{date_from}},\n        \"date_to\": {{date_to}},\n        \"date_field\": \"placed_at\"\n      },\n      \"line_items\": {\n        \"types\": {\n          \"in\": [\"skus\"]\n        }\n      }\n    }\n  }",{"_modelApiKey":367,"copy":515,"listStyle":412,"darkTheme":11,"buttons":516,"color":371,"indent":11},"\u003Cp>The query is structurally similar to the previous one we used but makes use of a dobule breakdown to get order data split by market and by line items. For each order we’ll be then selecting the top five by value count.  Notice the “double” filter we have here. We want to filter by date (as we did in the previous query), but also per line item type. For this dashboard, we only want to  consider line items corresponding to \u003Ccode>skus\u003C\u002Fcode>. In Commerce Layer, line items can also be shipping methods and other resources linked to the order. In this way we are getting the 5 best performing products (that is the 5 more frequent appearing in the line items) for each market.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>Orders by month\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>This one is slightly different from the previous two queries. The orders by month query will make use of a different endpoint: \u003Ccode>orders\u002Fdate_breakdown\u003C\u002Fcode> .\u003C\u002Fp>\n\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fmetrics\u002Fgetting-started\u002Fqueries\u002Fdate-breakdown\">Date Breakdowns\u003C\u002Fa> are:\u003C\u002Fp>\n\n\u003Cp>"\u003Cem>aggregations that show the frequency of occurrence of a specific date value within a dataset and let you apply a specific \u003Ca href=\"https:\u002F\u002Fapp.gitbook.com\u002Fo\u002F-Lfu_B3DKew-kvoEWzTk\u002Fs\u002FASSiAvbL4nFnkl8plQy2\u002Fgetting-started\u002Fqueries#query-operators\">operator\u003C\u002Fa> over a selected field of the records that are present on that date. When performing a date breakdown query on the Metrics API endpoint you get in the \u003Ca href=\"https:\u002F\u002Fapp.gitbook.com\u002Fo\u002F-Lfu_B3DKew-kvoEWzTk\u002Fs\u002FASSiAvbL4nFnkl8plQy2\u002Fgetting-started\u002Fqueries\u002Fdate-breakdown#response\">response\u003C\u002Fa> the list by date of the values of the computation (based on the selected \u003Ccode>operator\u003C\u002Fcode>) on the selected \u003Ccode>field\u003C\u002Fcode>, over the selected time \u003Ccode>interval\u003C\u002Fcode>, aggregated \u003Ccode>by\u003C\u002Fcode> another field.\u003C\u002Fem>"\u003C\u002Fp>\n\n\u003Cp>We will use the \u003Ccode>orders\u002Fdate_breakdown\u003C\u002Fcode> as the endpoint for the query, but still select the resource we created at the beginning of this section, and use the below as the query payload:\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":518,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"{\n  \"date_breakdown\": {\n    \"by\": \"order.placed_at\",\n    \"field\": \"order.total_amount_with_taxes\",\n    \"operator\": \"stats\",\n    \"interval\": \"month\"\n  },\n  \"filter\": {\n    \"order\": {\n      \"date_from\": \"{{date_from}}\", \n      \"date_to\": \"{{date_to}}\", \n      \"date_field\": \"current_date\"\n    }\n  }\n}",{"_modelApiKey":367,"copy":520,"listStyle":369,"darkTheme":11,"buttons":521,"color":371,"indent":11},"\u003Cp>This query will retrieve all orders in the \u003Ccode>date_from\u003C\u002Fcode> \u002F \u003Ccode>date_to\u003C\u002Fcode> time window. For each order, we want the total amount. \u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>You might have noticed that if you try to run these queries, you will get an error. That’s expected. The query needs input from the application to fill the variables defining the time window. If you just run the query and no value is provided, the result is an API error.\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Ch4>Creating the web application\u003C\u002Fh4>\n\n\u003Cp>Now that we have all the data sources in place, it’s time to build the actual dashboard. Retool visual editor will help us in this task.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>Retool is a very powerful tool, and of course we can’t cover the basics in this article. To learn more about Retool and their dashboard components, please refer to the \u003Ca href=\"https:\u002F\u002Fdocs.retool.com\u002Fapps\u002Fweb?docid=landing\">product documentation\u003C\u002Fa>. For specific info on the available components please refer to the \u003Ca href=\"https:\u002F\u002Fretool.com\u002Fcomponents\">components library\u003C\u002Fa>. You can download the package of this blog here…\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>The application layout is structured as a component tree where you can easily drag and drop components. Our application has a single page and contains:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>A header containing the title\u003C\u002Fli>\n\u003Cli>A container for the dates selector\u003C\u002Fli>\n\u003Cli>A container for the widget displaying data.\u003C\u002Fli>\n\u003C\u002Ful>\n",[],{"_modelApiKey":373,"border":7,"caption":523,"image":524,"size":382,"darkTheme":11,"rounded":7,"color":371},"The structure of our dashboard",{"url":525,"alt":526,"title":527,"width":528,"height":529,"format":290,"focalPoint":530,"customData":531},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708179156-dashboard-structure.png","The image shows a structure of the Retool Metrics API dashboard.","Retool Dashboard Structure",2714,1730,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":533,"listStyle":412,"darkTheme":11,"buttons":534,"color":371,"indent":11},"\u003Cp>In this next section, we’ll focus on the core elements of the dashboard, leaving behind the layout and the overall presentation. For now, we’ll skip the header so we can focus on the date selector.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>The Date Selector\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>The panel beside the title contains two \u003Ca href=\"https:\u002F\u002Fretool.com\u002Fcomponents\u002Fdate-time\">Date Time widgets\u003C\u002Fa>: one for the \u003Ccode>date_from\u003C\u002Fcode> and one for the \u003Ccode>date_to\u003C\u002Fcode>.  These are the two variables sent to the queries we created in the previous section. In order to comply with the date format expected by the Metrics API, we need to configure the widget accordingly:\u003C\u002Fp>\n\n\u003Cp>In the  \u003Cstrong>Content\u003C\u002Fstrong> section: \u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set the default value as \u003Ccode>{{ new Date() }}\u003C\u002Fcode> Every time the dashboard is loaded, the default date will be the current date. \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>In the \u003Cstrong>Date\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set Format as \u003Ccode>yyyy-MM-dd\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Leave the other settings with the default values\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>In the \u003Cstrong>Time\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set Format as \u003Ccode>HH:mm:ss\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Leave the rest untouched\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>In the \u003Cstrong>Time Zone\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Leave untouched\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>In the \u003Cstrong>Add-ons\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set Label as \u003Ccode>Date From\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Leave the default prefix icon\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Leave all the remaining sections untouched.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":536,"image":537,"size":382,"darkTheme":11,"rounded":7,"color":371},"Configuration of the Date\u002FTime widgets",{"url":538,"alt":539,"title":540,"width":541,"height":542,"format":290,"focalPoint":543,"customData":544},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708206600-configuration-of-the-date-time-widgets.png","The images shows the configuration of the data and time widgets within the Retool Dashboard.","Configuration of the Date\u002FTime Widgets",1994,2018,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":546,"listStyle":412,"darkTheme":11,"buttons":547,"color":371,"indent":11},"\u003Cp>The \u003Ccode>date_to\u003C\u002Fcode> Date Time widget is configured in the same exact way as the \u003Ccode>date_from\u003C\u002Fcode>.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>The Orders by currency widget\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>This widget will show a breakdown by currency of the orders done in the given time window. We want to see a result like this:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":549,"image":550,"size":396,"darkTheme":11,"rounded":7,"color":371},"Orders by currency widget",{"url":551,"alt":552,"title":549,"width":553,"height":554,"format":290,"focalPoint":555,"customData":556},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708206760-orders-by-currency.png","The images shows the Orders by currency widget with two currency codes, EUR and USD, with a quantity of orders for each currency.",760,406,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":558,"listStyle":412,"darkTheme":11,"buttons":559,"color":371,"indent":11},"\u003Cp>For this widget, we will use the \u003Ca href=\"https:\u002F\u002Fretool.com\u002Fcomponents\u002Ftable?adgroupid=&gad_source=1\">table\u003C\u002Fa> component. First, we add it to the layout and give it a name. Then, we attach a data source to our table. To do this, open the “code” panel of our app, add a new code section, and select “import query from library” as shown in the screenshot below.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":561,"image":562,"size":396,"darkTheme":11,"rounded":7,"color":371},"Adding a code section to our project.",{"url":563,"alt":564,"title":561,"width":565,"height":566,"format":290,"focalPoint":567,"customData":568},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708206882-adding-a-code-section-to-our-project.png","The Retool dashboard has a code icon on the left side. Click it to add new code. In this case, we are importing a query from our library.",918,988,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":570,"listStyle":369,"darkTheme":11,"buttons":571,"color":371,"indent":11},"\u003Cp>A new panel will appear, pictured in the screenshot below. Starting in the \u003Cstrong>General\u003C\u002Fstrong> Tab:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cp>Select \u003Cstrong>Import from Query Library\u003C\u002Fstrong> as the \u003Cstrong>Resource\u003C\u002Fstrong>. We are going to select one of the queries previously created.\u003C\u002Fp>\u003C\u002Fli>\n\u003Cli>\u003Cp>Just below, select \u003Cstrong>Run query automatically when inputs change\u003C\u002Fstrong> from the dropdown. \u003C\u002Fp>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>**Every time we change our time window using the previously created date selectors, a new query will be performed and the dashboard will update accordingly.\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>\u003Cp>Select the query \u003Cstrong>Orders by Currency\u003C\u002Fstrong> as created in the previous section. As you’ll recall, the query needs two variables to run: \u003Ccode>date_from\u003C\u002Fcode> and \u003Ccode>date_to\u003C\u002Fcode>. The variables will show in the panel, which allows us to “wire” the input coming from our date selector.\u003C\u002Fp>\u003C\u002Fli>\n\u003Cli>\u003Cp>Set \u003Cstrong>date_from\u003C\u002Fstrong> as \u003Ccode>{{date_from.value.substring(0, date_from.value.length-4)}}Z\u003C\u002Fcode>\u003C\u002Fp>\u003C\u002Fli>\n\u003Cli>\u003Cp>Set \u003Cstrong>date_to\u003C\u002Fstrong> as \u003Ccode>{{date_to.value.substring(0, date_to.value.length-4)}}Z\u003C\u002Fcode>     \u003C\u002Fp>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>You might be wondering why we truncate the last four digits of the value coming from the Date Time component. We trim the milliseconds because the format is not compatible with the date format expected by Metrics API. (e.g. \u003Ccode>%Y-%m-%dT%H:%M:%SZ\u003C\u002Fcode> or \u003Ccode>%Y-%m-%dT%H:%M:%S+\u002F-HH:MM\u003C\u002Fcode>)\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Finally, in the \u003Cstrong>Transform results\u003C\u002Fstrong> section, replace the default value with \u003Ccode>return data.data\u003C\u002Fcode>. \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The Metrics API returns the actual data wrapped in a data object, (\u003Ca href=\"https:\u002F\u002Fdocs.commercelayer.io\u002Fmetrics\u002Fgetting-started\u002Fapi-specification#response\">documentation\u003C\u002Fa>), while the first \u003Ccode>data\u003C\u002Fcode> is Retool’s wrapper for the overall response.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":573,"image":574,"size":382,"darkTheme":11,"rounded":7,"color":371},"Configuring the Orders by Currency dashboard view.",{"url":575,"alt":576,"title":573,"width":577,"height":578,"format":290,"focalPoint":579,"customData":580},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708207436-setting-up-orders-by-currency-dashboard-view.png","The Retool configuration allows you to input specific values for the date from and date to fields.",1074,1616,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":582,"listStyle":412,"darkTheme":11,"buttons":583,"color":371,"indent":11},"\u003Cp>You can leave the remaining settings with their default values. Before attaching the data source to the table, let’s take a quick look at the response data we get from the Metrics API.\u003C\u002Fp>\n\n\u003Col>\n\u003Cli>Visit the code section of the app and select \u003Cstrong>orders\u003Cem>by\u003C\u002Fem>currency\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Set the date selectors of the dashboard\u003C\u002Fli>\n\u003Cli>Click the \u003Cstrong>Run\u003C\u002Fstrong> button on the top of the code panel:\u003C\u002Fli>\n\u003C\u002Fol>\n",[],{"_modelApiKey":373,"border":7,"caption":585,"image":586,"size":382,"darkTheme":11,"rounded":7,"color":371},"Check the Output section to see the results coming from the Metrics API",{"url":587,"alt":588,"title":585,"width":589,"height":590,"format":290,"focalPoint":591,"customData":592},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708207644-output-shows-the-results-coming-from-the-metrics-api.png","The output section in the image shows a JSON response from the Metrics API.",1002,1988,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":594,"listStyle":412,"darkTheme":11,"buttons":595,"color":371,"indent":11},"\u003Cp>The Output section now shows the results coming from the Metrics API. Keep in mind that this is the result of the transformation we configured, so is not the raw data.\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":597,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"{\n  \"order.currency_code\": [\n    {\n      \"label\": \"EUR\",\n      \"value\": 24\n    },\n    {\n      \"label\": \"USD\",\n      \"value\": 8\n    }\n  ]\n}",{"_modelApiKey":367,"copy":599,"listStyle":369,"darkTheme":11,"buttons":600,"color":371,"indent":11},"\u003Cp>Now let’s go back to our Table component and attach the data source to it. From the \u003Cstrong>Data source\u003C\u002Fstrong> drop down, select the code snippet we created before. I used the name \u003Cstrong>orders\u003Cem>by\u003C\u002Fem>currency\u003C\u002Fstrong>. \u003C\u002Fp>\n\n\u003Cp>In the \u003Cstrong>Columns\u003C\u002Fstrong> section,create the first column named \u003Cstrong>Currency code\u003C\u002Fstrong>, and change the following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set \u003Cstrong>Source\u003C\u002Fstrong> as \u003Ccode>order.currency_code\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Label\u003C\u002Fstrong> as “Currency code”\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Format\u003C\u002Fstrong> as String\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Mapped value\u003C\u002Fstrong> as \u003Ccode>{{item.label}}\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>\u003Cstrong>In Retool, an \u003Ccode>item\u003C\u002Fcode> corresponds to the current item of the array that is received as the data source. \u003Ccode>label\u003C\u002Fcode> is the attribute of the original data we want to be displayed as the column value according to the response of the API we showed before.\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>Now, create a second column named \u003Cstrong># of orders\u003C\u002Fstrong> and change the following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set \u003Cstrong>Source\u003C\u002Fstrong> as \u003Ccode>order.currency_code\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Label\u003C\u002Fstrong> as “# of orders”\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Format\u003C\u002Fstrong> as Number\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Mapped value\u003C\u002Fstrong> as \u003Ccode>{{item.value}}\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Finally, set the \u003Cstrong>Currency code\u003C\u002Fstrong> as the \u003Cstrong>Primary key\u003C\u002Fstrong> column. Leave the remaining settings with default values. And that’s it. You should now have a nice table that looks like the example we showed at the beginning of this section.\u003C\u002Fp>\n\n\u003Cp>\u003Cstrong>The Best Selling Product By Market widget\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>Since this widget is based on the \u003Cstrong>Table\u003C\u002Fstrong> component, follow the same steps as in the previous section. However, since we are interested in a different metric, you will create another code snippet that uses the “Best-selling products by market” query we created earlier. Here is the configuration:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":602,"image":603,"size":382,"darkTheme":11,"rounded":7,"color":371},"Configure the settings for the \"Best selling products by market\" dashboard view",{"url":604,"alt":605,"title":602,"width":606,"height":607,"format":290,"focalPoint":608,"customData":609},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708208048-best-selling-products-by-market-configuration.png","The screenshot shows the configuration for the best selling products by market. It's the same configuration as above, but uses the correct query for this data view.",1080,1598,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":611,"listStyle":412,"darkTheme":11,"buttons":612,"color":371,"indent":11},"\u003Cp>In this case, the output of the query will be something similar:\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":614,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"{\n  \"market.name\": [\n    {\n      \"label\": \"Europe\",\n      \"value\": 23,\n      \"line_items.name\": [\n        {\n          \"label\": \"White Men T-shirt with Black Logo (XL)\",\n          \"value\": 11\n        },\n        {\n          \"label\": \"Black Baby Onesie Short Sleeve with Pink Logo (12 Months)\",\n          \"value\": 4\n        },\n        {\n          \"label\": \"Black Baby Onesie Short Sleeve with Pink Logo (6 Months)\",\n          \"value\": 3\n        },\n        {\n          \"label\": \"L.A. Confidential \",\n          \"value\": 3\n        },\n        {\n          \"label\": \"White Men T-shirt with Pink Logo (M)\",\n          \"value\": 3\n        }\n      ]\n    },\n    {\n      \"label\": \"USA\",\n      \"value\": 8,\n      \"line_items.name\": [\n        {\n          \"label\": \"Black Baby Onesie Short Sleeve with Pink Logo (12 Months)\",\n          \"value\": 5\n        },\n        {\n          \"label\": \"Black Baby Onesie Short Sleeve with White Logo (12 Months)\",\n          \"value\": 5\n        },\n        {\n          \"label\": \"White Baby Onesie Short Sleeve with Black Logo (12 Months)\",\n          \"value\": 5\n        },\n        {\n          \"label\": \"White Baby Onesie Short Sleeve with Pink Logo (12 Months)\",\n          \"value\": 5\n        },\n        {\n          \"label\": \"L.A. Confidential \",\n          \"value\": 3\n        }\n      ]\n    }\n  ]\n}",{"_modelApiKey":367,"copy":616,"listStyle":369,"darkTheme":11,"buttons":617,"color":371,"indent":11},"\u003Cp>Similar to what we did before, we can now create a new table and attach the datasource we just created.\u003C\u002Fp>\n\n\u003Cp>From the \u003Cstrong>Data source\u003C\u002Fstrong> drop down, select the code snippet we created before (\u003Cstrong>best\u003Cem>selling\u003C\u002Fem>product\u003Cem>by\u003C\u002Fem>market\u003C\u002Fstrong> if you named it as I did)\u003C\u002Fp>\n\n\u003Cp>In the Columns section, create a  first column named \u003Cstrong>Market name\u003C\u002Fstrong> and update the following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set \u003Cstrong>Source\u003C\u002Fstrong> as \u003Ccode>market.name\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Label\u003C\u002Fstrong> as “Market name”\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Format\u003C\u002Fstrong> as String\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Mapped value\u003C\u002Fstrong> as \u003Ccode>{{item.label}}\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Create a second column named \u003Cstrong>Best Seller\u003C\u002Fstrong>, and update these:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set \u003Cstrong>Source\u003C\u002Fstrong> as \u003Ccode>order.currency_code\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Label\u003C\u002Fstrong> as “Best Seller”\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Format\u003C\u002Fstrong> as String\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Mapped value\u003C\u002Fstrong> as \u003Ccode>{{(item['line_items.name'][0]).label}}\u003C\u002Fcode> We use the “get 0 pattern” because the query is set up to return data in descending order as seen from the output example above.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Finally, set the \u003Cstrong>Primary key\u003C\u002Fstrong> to the \u003Cstrong>Market name\u003C\u002Fstrong> column. Leave the remaining settings with default values. \u003C\u002Fp>\n\n\u003Cp>The result will be something like this:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":619,"image":620,"size":396,"darkTheme":11,"rounded":7,"color":371},"The Best Selling Products By Market data view.",{"url":621,"alt":622,"title":623,"width":624,"height":625,"format":290,"focalPoint":626,"customData":627},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708208420-best-selling-product-by-market-widget.png","The image shows two best selling products, one in the USA and the other in Europe. It is the result of the output from the Metrics API query we described above.","The Best Selling Product By Market widget",808,342,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":629,"listStyle":412,"darkTheme":11,"buttons":630,"color":371,"indent":11},"\u003Cp>\u003Cstrong>The Orders by Month chart\u003C\u002Fstrong>\u003C\u002Fp>\n\n\u003Cp>It’s chart time! \u003C\u002Fp>\n\n\u003Cp>We are aiming to visualize the count and value of orders for each month on a timeline. To do this, we use the \u003Cstrong>Orders by month\u003C\u002Fstrong> query that we created before that leverages date breakdowns of Metrics API. Also, in this case, we create a code snippet that first imports the query from the library.\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":632,"image":633,"size":396,"darkTheme":11,"rounded":7,"color":371},"The Orders by Month chart configuration page",{"url":634,"alt":635,"title":632,"width":636,"height":637,"format":290,"focalPoint":638,"customData":639},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708208621-orders-by-month-chart-configuration.png","The Orders by Month chart configuration page that shows all the inputs required to build the chart visualization.",1070,1600,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":641,"listStyle":412,"darkTheme":11,"buttons":642,"color":371,"indent":11},"\u003Cp>Let’s give a look at the data returned by our API in this case:\u003C\u002Fp>\n",[],{"_modelApiKey":492,"code":644,"showLineNumbers":11,"highlightLines":280,"language":494,"size":495},"[\n  ...,\n  {\n    \"date\": \"2023-03-01T00:00:00.000Z\",\n    \"value\": {\n      \"count\": 2,\n      \"min\": 35.38,\n      \"max\": 35.38,\n      \"avg\": 35.38,\n      \"sum\": 70.76\n    }\n  },\n  {\n    \"date\": \"2023-04-01T00:00:00.000Z\",\n    \"value\": {\n      \"count\": 12,\n      \"min\": 35.38,\n      \"max\": 73.2,\n      \"avg\": 38.53,\n      \"sum\": 462.38\n    }\n  },\n  ...\n]",{"_modelApiKey":367,"copy":646,"listStyle":369,"darkTheme":11,"buttons":647,"color":371,"indent":11},"\u003Cp>For each month, the Metrics API will return stats about the orders, namely order count, min value, max value, average, and total value. Now that we have set up the data source, we can create our chart. We are going to use Retool's \u003Ca href=\"https:\u002F\u002Fretool.com\u002Fcomponents\u002Fchart?adgroupid=&gad_source=1\">Chart component\u003C\u002Fa>.\u003C\u002Fp>\n\n\u003Cp>Start by adding a new chart to the dashboard layout tree. Then, in the \u003Cstrong>Content\u003C\u002Fstrong> section, update the following:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Select \u003Cstrong>UI Form (default)\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Data source\u003C\u002Fstrong> as \u003Ccode>{{orders_by_month.data}}\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>Chart Type\u003C\u002Fstrong> as \u003Cstrong>Line Chart\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>X-axis values\u003C\u002Fstrong> as \u003Ccode>{{formatDataAsObject(orders_by_month.data)['date']}}\u003C\u002Fcode> so we extract all the months from the response query.\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Take note of the \u003Ccode>formatDataAsObject\u003C\u002Fcode>. It is a Retool helper method used to transform data structures in different forms, an object in this case. More information can be found on \u003Ca href=\"https:\u002F\u002Fdocs.retool.com\u002Freference\u002Fapps\u002Fglobal\u002Fmethods\u002Fhelpers#formatdataasobject\">retool reference\u003C\u002Fa>.    \u003C\u002Fp>\n\n\u003Cp>In the \u003Cstrong>Datasets\u003C\u002Fstrong> section we are creating two datasets. Our chart will display both order count and order total value per month. Create the first data set:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set the \u003Cstrong>Dataset name\u003C\u002Fstrong> as “orders per month”\u003C\u002Fli>\n\u003Cli>Set the \u003Cstrong>Dataset values\u003C\u002Fstrong> with this command \u003Ccode>{{formatDataAsObject(orders_by_month.data).value.map((value)=>value.count)}}\u003C\u002Fcode> . \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>What we are doing is extracting the \u003Ccode>count\u003C\u002Fcode> attribute in the \u003Ccode>value\u003C\u002Fcode> object and creating an array of all the values for the different months. Now, create the second data set:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set the \u003Cstrong>Dataset name\u003C\u002Fstrong> as “revenue per month”\u003C\u002Fli>\n\u003Cli>Set the \u003Cstrong>Dataset values\u003C\u002Fstrong> with this command \u003Ccode>{{formatDataAsObject(orders_by_month.data).value.map((value)=>value.sum)}}\u003C\u002Fcode> . \u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>Similar to just above, we extract the \u003Ccode>count\u003C\u002Fcode> attribute in the \u003Ccode>value\u003C\u002Fcode> object and create an array of all the values for the different months.\u003C\u002Fp>\n\n\u003Cp>Finally, in the \u003Cstrong>Interaction\u003C\u002Fstrong> section:\u003C\u002Fp>\n\n\u003Cul>\n\u003Cli>Set \u003Cstrong>X-axis title\u003C\u002Fstrong> as "Month"\u003C\u002Fli>\n\u003Cli>Set \u003Cstrong>X-axis type\u003C\u002Fstrong> as "Date"\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cp>The result should be something like the below:\u003C\u002Fp>\n",[],{"_modelApiKey":373,"border":7,"caption":649,"image":650,"size":382,"darkTheme":11,"rounded":7,"color":371},"Retool dashboard visualization showing an \"orders by month\" chart",{"url":651,"alt":652,"title":649,"width":653,"height":654,"format":290,"focalPoint":655,"customData":656},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1708285564-orders-by-month-chart-in-retool.png","The image shows two line graphs, one displaying orders per month and the other displaying revenue per month. This is the output from the data retrieved from the Metrics API.",1960,642,{"x":292,"y":292},{},{"_modelApiKey":367,"copy":658,"listStyle":412,"darkTheme":11,"buttons":659,"color":371,"indent":11},"\u003Cp>The chart is interactive, by clicking on the items in the legend, you can deactivate or activate the data set you want to hide\u002Fshow. This is it, we are done with our web application! \u003C\u002Fp>\n\n\u003Ch4>Conclusion\u003C\u002Fh4>\n\n\u003Cp>If you've made it this far, there's not much to wrap up. You already understand the importance of measuring the health of your business by creating data visualizations for your team. This tutorial walked you through the process of building a business dashboard with Retool and the Commerce Layer Metrics API. We discussed setting up a REST API resource in Retool, creating queries to fetch data from the Metrics API, and creating a web application to serve as a visual dashboard. By following these steps, you can effectively visualize and track your business metrics, leading to better data-driven decisions. \u003C\u002Fp>\n\n\u003Cp>But, that doesn't mean that you have all of your questions answered. If you, don't we are here to help. Feel free to \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Ffabpicca\">connect with me on LinkedIn\u003C\u002Fa> so we can discuss what you are trying to do. You can also join the Commerce Layer Slack #Community. Just follow the sign up form below. \u003C\u002Fp>\n\n\u003Cp>We hope you enjoyed this \u003Cem>mega\u003C\u002Fem> blog post. I know it was a long post, but it had to be done. :) Happy dashboarding!\u003C\u002Fp>\n",[],{"displayTitle":661,"cta":303,"ctaText":280,"cards":662},"Your next read",[663,682,697,716,734],{"_modelApiKey":212,"link":664,"subtitle":668,"date":668,"author":669,"additionalAuthors":677,"icon":678,"abstract":679,"tag":680,"displayTitle":665,"cardRatio":300,"featured":681},{"text":665,"isExternal":11,"url":280,"link":666},"Measure the health and performance of your store with our Metrics API.",{"_modelApiKey":212,"slug":667},"track-store-performance-with-our-metrics-api","October 27, 2022",{"name":670,"picture":671},"Daniel Oh",{"url":672,"alt":673,"title":673,"width":289,"height":289,"format":674,"focalPoint":675,"customData":676},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1658849633-daniel.jpg","Daniel Oh avatar","jpg",{"x":292,"y":292},{},[],"chart-bar","Today, we’re happy to announce the public release of our Metrics API, a brand new API that enables our clients to extract, organize, and analyze any data they want from our platform.",{"color":298,"name":8},0,{"_modelApiKey":212,"link":683,"subtitle":687,"date":687,"author":688,"additionalAuthors":692,"icon":693,"abstract":694,"tag":695,"displayTitle":684,"cardRatio":11,"featured":696},{"text":684,"isExternal":11,"url":280,"link":685},"How to build a dynamic pricing engine with Commerce Layer's External Prices API and ChatGPT.",{"_modelApiKey":212,"slug":686},"how-to-build-dynamic-pricing-with-external-prices-api-chatgpt-ai","January 23, 2024",{"name":285,"picture":689},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":690,"customData":691},{"x":292,"y":292},{},[],"robot","In this article, we use OpenAI's ChatGPT to generate prices for articles (SKUs) added to a cart.  To do this, we utilize Commerce Layer's External Prices API and custom logic to get prices based on criteria we provided to ChatGPT.",{"color":298,"name":299},1,{"_modelApiKey":212,"link":698,"subtitle":702,"date":702,"author":703,"additionalAuthors":712,"icon":713,"abstract":714,"tag":715,"displayTitle":699,"cardRatio":11,"featured":38},{"text":699,"isExternal":11,"url":280,"link":700},"5 reasons you need to start doing ecommerce personalization on your online store.",{"_modelApiKey":212,"slug":701},"5-reasons-you-need-to-start-doing-ecommerce-personalization-on-your-online-store","January 27, 2022",{"name":704,"picture":705},"Esat Artug",{"url":706,"alt":707,"title":707,"width":708,"height":708,"format":709,"focalPoint":710,"customData":711},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1643045525-esat-artug.jpeg","Esat Artug — Content Manager at Ninetailed",640,"jpeg",{"x":292,"y":292},{},[],"handbag","Personalization is one of the key ingredients for boosting repeat purchases and increasing customer retention. That's why it is a must in ecommerce and you simply cannot let your competitors beat you at this.",{"color":298,"name":100},{"_modelApiKey":212,"link":717,"subtitle":721,"date":721,"author":722,"additionalAuthors":729,"icon":730,"abstract":731,"tag":732,"displayTitle":718,"cardRatio":11,"featured":733},{"text":718,"isExternal":11,"url":280,"link":719},"8 ways to jumpstart your promotions strategy using Commerce Layer.",{"_modelApiKey":212,"slug":720},"8-ways-to-jumpstart-your-promotions-strategy-using-commerce-layer","October 23, 2023",{"name":723,"picture":724},"Seth Bindernagel",{"url":725,"alt":726,"title":726,"width":289,"height":289,"format":674,"focalPoint":727,"customData":728},"https:\u002F\u002Fwww.datocms-assets.com\u002F35053\u002F1656680208-seth.jpg","Seth Bindernagel avatar",{"x":292,"y":292},{},[],"currency-dollar","SunGod partnered with Strava to launch a campaign called “The Design Your SunGods Challenge\". Learn all about it along with 8 ways to jumpstart your promotional strategy.",{"color":298,"name":100},3,{"_modelApiKey":212,"link":735,"subtitle":739,"date":739,"author":740,"additionalAuthors":744,"icon":745,"abstract":746,"tag":747,"displayTitle":736,"cardRatio":11,"featured":748},{"text":736,"isExternal":11,"url":280,"link":737},"How to build an external promotion using lambda functions.",{"_modelApiKey":212,"slug":738},"how-to-build-an-external-promotion-using-lambda-functions","July 15, 2022",{"name":285,"picture":741},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":742,"customData":743},{"x":292,"y":292},{},[],"gift","This tutorial will give you a little taste of how powerful Commerce Layer external promotions feature is, by showing an example where we use an AWS Lambda function to trigger a special discount on a customer's birthday.",{"color":298,"name":299},4,[750,751,753,755,757,759,761,763,765,767,769,771,773,775,777,779,781],{"attributes":303,"tag":304,"content":305},{"attributes":752,"tag":309,"content":303},{"property":308,"content":305},{"attributes":754,"tag":309,"content":303},{"name":312,"content":305},{"attributes":756,"tag":309,"content":303},{"name":315,"content":316},{"attributes":758,"tag":309,"content":303},{"property":319,"content":316},{"attributes":760,"tag":309,"content":303},{"name":322,"content":316},{"attributes":762,"tag":309,"content":303},{"property":325,"content":326},{"attributes":764,"tag":309,"content":303},{"property":329,"content":330},{"attributes":766,"tag":309,"content":303},{"property":333,"content":334},{"attributes":768,"tag":309,"content":303},{"name":337,"content":326},{"attributes":770,"tag":309,"content":303},{"property":340,"content":341},{"attributes":772,"tag":309,"content":303},{"property":344,"content":345},{"attributes":774,"tag":309,"content":303},{"property":348,"content":349},{"attributes":776,"tag":309,"content":303},{"property":352,"content":353},{"attributes":778,"tag":309,"content":303},{"property":356,"content":280},{"attributes":780,"tag":309,"content":303},{"name":359,"content":360},{"attributes":782,"tag":309,"content":303},{"name":363,"content":364},[784],{"name":285,"picture":785},{"url":287,"alt":288,"title":288,"width":289,"height":289,"format":290,"focalPoint":786,"customData":787},{"x":292,"y":292},{},1791379913450]