Skip to content

Commit

Permalink
complete
Browse files Browse the repository at this point in the history
  • Loading branch information
@russlooker
russlooker committed Mar 9, 2021
1 parent 7d8fe06 commit a6460aa
Show file tree
Hide file tree
Showing 2 changed files with 112 additions and 30 deletions.
Binary file added .DS_Store
View file
Binary file not shown.
142 changes: 112 additions & 30 deletions src/HelloWorld.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,18 @@
*/

import React, { useEffect, useState, useContext, useCallback } from 'react'
import { ComponentsProvider, Card, CardContent, Flex, FlexItem, Tree, TreeItem, Space, SpaceVertical, Heading} from '@looker/components'
import {
ComponentsProvider,
Card, CardContent,
Flex, FlexItem,
Tree, TreeItem,
Space, SpaceVertical,
Heading, ToggleSwitch
} from '@looker/components'
import { ExtensionContext } from '@looker/extension-sdk-react'
import { LookerEmbedSDK, LookerEmbedLook } from '@looker/embed-sdk'
import { LookerEmbedSDK } from '@looker/embed-sdk'
import styled from "styled-components"
import { paddingBottom } from 'styled-system'

const EmbedContainer = styled.div`
width: 100%;
Expand All @@ -40,8 +48,12 @@ export const HelloWorld = () => {
const { core40SDK, extensionSDK } = useContext(ExtensionContext)
const [qid, setQid] = useState();
const [geos, setGeos] = useState();
const [state, setState] = useState();
const [explore, setExplore] = useState();
const [on, setOn] = React.useState(false)


useEffect(() => {
useEffect(() => {
const initialize = async () => {
try {
const states = await core40SDK.ok(core40SDK.run_inline_query(
Expand All @@ -60,7 +72,7 @@ export const HelloWorld = () => {
))
setGeos(
states.map((state )=>{
return <TreeItem onClick={async () => { getQid(state['users.state']) }} icon="FieldLocation">
return <TreeItem onClick={async () => { setState(state['users.state']) }} icon="FieldLocation">
{state['users.state']}
</TreeItem>
})
Expand All @@ -72,18 +84,30 @@ export const HelloWorld = () => {
getQid('California')
initialize()
},[])
const getQid = async (state) => {

//Listens for changes in the state variable (which changes onclick of the tree) and updates the embed query filters
useEffect(() => {
if (state && explore) {
explore.updateFilters({'users.state': state})
explore.run()
}
}
, [state])

/*
Uses the state variable to call Looker's API and get a new qid.
Also internally uses the `on` variable to determine the measure field visualized
*/
const getQid = async (state) => {
let visconfig = {
"series_types": {},
"type": "looker_map",
"map_plot_mode": "points",
"heatmap_gridlines": false,
"heatmap_gridlines_empty": false,
"heatmap_opacity": 0.5,
"show_region_field": true,
"draw_map_labels_above_data": true,
"map_tile_provider": "light",
"map_position": "fit_data",
"map_zoom": 6,
"map_scale_indicator": "off",
"map_pannable": true,
"map_zoomable": true,
Expand All @@ -92,56 +116,114 @@ export const HelloWorld = () => {
"map_marker_radius_mode": "proportional_value",
"map_marker_units": "meters",
"map_marker_proportional_scale_type": "linear",
"map_marker_color_mode": "fixed",
"map_marker_color_mode": "value",
"show_view_names": false,
"show_legend": true,
"quantize_map_value_colors": false,
"reverse_map_value_colors": false,
"defaults_version": 1
"type": "looker_map",
"x_axis_gridlines": false,
"y_axis_gridlines": true,
"show_y_axis_labels": true,
"show_y_axis_ticks": true,
"y_axis_tick_density": "default",
"y_axis_tick_density_custom": 5,
"show_x_axis_label": true,
"show_x_axis_ticks": true,
"y_axis_scale_mode": "linear",
"x_axis_reversed": false,
"y_axis_reversed": false,
"plot_size_by_field": false,
"trellis": "",
"stacking": "",
"limit_displayed_rows": false,
"legend_position": "center",
"point_style": "none",
"show_value_labels": false,
"label_density": 25,
"x_axis_scale": "auto",
"y_axis_combined": true,
"ordering": "none",
"show_null_labels": false,
"show_totals_labels": false,
"show_silhouette": false,
"totals_color": "#808080",
"defaults_version": 1,
"hidden_fields": [
"users.id"
],
"series_types": {}
}
const response = await core40SDK.ok(
core40SDK.create_query({
view:'order_items',
model:'join20',
fields:['users.location', 'order_items.count'],
fields: [
on ? "order_items.total_profit" : "order_items.count",
"users.location",
"users.id"
],
filters:{'users.state':state},
sorts:['order_items.total_profit desc'],
vis_config: visconfig
})
)
setQid(response.client_id)
}
const embedCtrRef = useCallback((el) => {
const hostUrl = extensionSDK.lookerHostData.hostUrl
if (el && hostUrl && qid) {
el.innerHTML = ''
LookerEmbedSDK.init(hostUrl)
LookerEmbedSDK.createExploreWithUrl(`${hostUrl}/embed/query/join20/order_items?qid=${qid}&sdk=2&embed_domain=${hostUrl}&sandboxed_host=true`)
.appendTo(el)
.on('drillmenu:click',(e) => {console.log(e)})
.build()
.connect()
.then()
.catch((error) => {
console.error('Connection error', error)
})

//Listens to the toggle switch `on` state variable and cyles the qid with the other measure
useEffect(() => {
const cycleQid = async () => {
if (state) {
getQid(state)
}
},[qid])
}
cycleQid()
}
, [on])

// Embed iframe builder, listens to changes in the qid (Which currently only changes on pageload)
const embedCtrRef = useCallback((el) => {
const hostUrl = extensionSDK.lookerHostData.hostUrl
if (el && hostUrl && qid) {
el.innerHTML = ''
LookerEmbedSDK.init(hostUrl)
LookerEmbedSDK.createExploreWithUrl(`${hostUrl}/embed/query/join20/order_items?qid=${qid}&sdk=2&embed_domain=${hostUrl}&sandboxed_host=true`)
.appendTo(el)
.on('drillmenu:click',(e) => {console.log(e)})
.build()
.connect()
.then(setExplore)
.catch((error) => {
console.error('Connection error', error)
})
}
},[qid])

return (
<>
<ComponentsProvider>
<div style={{ backgroundColor:'#A9AAC7', padding:'10px', height:'100%'}}>
<SpaceVertical m={5} ><Heading style={{color:'#404263', fontWeight:'bold', fontFamily:'Arial'}}>State Sales Explorer</Heading></SpaceVertical>

<div style={{ backgroundColor:'#262D33', padding:'10px', height:'100%'}}>
<Flex flexDirection="row" mr="small">
<FlexItem>
<SpaceVertical m={2} >
<Heading style={{color:'#fff', fontWeight:'bold', fontFamily:'Arial'}}>Best Customers by Region</Heading>
</SpaceVertical>
</FlexItem>

</Flex>
<Flex flexDirection="row" mr="large">
<FlexItem maxWidth="200" maxHeight="800">
<Card raised>
<CardContent style={{overflow:'scroll'}} >
<Tree label="Regions" icon="Hamburger" defaultOpen >
<Tree label="Regions" icon="Hamburger" defaultOpen style={{ overflow: 'hidden'}} >
{geos}
</Tree>
</CardContent>
</Card>
<div style={{color:'#fff', paddingTop:'5px', paddingBottom:'0px'}}>
By Volume <ToggleSwitch onChange={(event)=>setOn(event.target.checked)} on={on} id="switch" /> By Profit
</div>
</FlexItem>
<Space />
<FlexItem minWidth="80%" maxWidth="100%" maxHeight="800">
Expand Down

0 comments on commit a6460aa

Please sign in to comment.