Code Monkey home page Code Monkey logo

interview-challenge's Introduction

Coding Challenge: Design a Dashboard

Use this Mockup file

NOTE: Clone this repository and build your application on this repository, then share it with me at the end of the process.

Preface

Our company wants to create a new product and make it available to our clients. The product will be a marketing analytics dashboard where the clients can see all of their marketing channels together along with their relevant metrics: spend, revenue, orders, etc.

In order to build the marketing analytics dashboard, the following has been provided:

  1. The design team has provided a high-fidelity mockup that Product wants to see turned into a functional prototype.
  2. The API team has provided response mockups from two API queries they are providing to the front-end.
    1. Layout Response: All configuration data required to build the layout of the dashboard
    2. Data Response: All data for each of the widgets

How-to

On the right-hand side of the design mockup there are names for each section.

The Mocked Data response is available in this repository here.

Each widget on the page is referenced in the layout response under the layout property. the layout property should be used to create the UI of all of the dashboard widgets.

fieldDefinitions is a keyed object of all of the metrics and dimensions that are used throughout the dashboard. each definition includes:

  1. label: the display name
  2. format: how the data should be formatted. options are none, currency, percent
  3. type: Determines if it is a 'number' field or a 'string' field
  4. aggFn: used to determine if the metric should be "summed" or "averaged" in the total line in the table
  5. digitsInfo: applies to number or currency formatted fields. See this for more info.

Details about each Layout Section

  1. Metrics Overview
    1. Metrics are grouped together. Each metric under the group has its own displayOrder that is used to determine how it should be displayed.
    2. The data for this is at backendDataResponse.dataPoints
  2. Table
    1. fields: a list of objects, where each object contains a name of a field that should be shown for that column. the name points to the key in the data response
    2. The data for this is at backendDataResponse.dataSets[0]

Requirements

  1. This must be built within Angular 13
  2. This must use typescript
  3. Use whatever you want to build the table

Output

  1. The end result should be a functional Angular Application that can be run on localhost

You have 1 week from today for this challenge. Please reach out if you have any questions.

interview-challenge's People

Contributors

gcko avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.