designer

designer.html

<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../esri-html5/esri-chartjs.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icon/core-icon.html">

<link rel="import" href="../esri-html5/esri-webmap.html">

<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">
<link rel="import" href="../esri-html5/esri-pivotmaps-financepanel.html">


<polymer-element name="exec-dashboard">
  <template>

    <style>
      host: {
        font-family: 'Roboto 2', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        margin: 0;
        background: darkslategray;
      }

      .green {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 640px;
        background: #f2f2f2;
      }
      .chip-container {
        position: absolute;
        top: 535px;
        right: 0;
        left: 0;
        text-align: center;
      }

      .chip {
        display: inline-block;
        position: relative;
        border-radius: 3px;
        margin: 4px;
        overflow: hidden;
        text-align: start;
        background-color: #fff;
        box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
      }

      .chip-top {
        width: 200px;
        height: 200px;
      }

      .chip-bottom {
        padding: 8px;
        line-height: 1.5;
      }

      .chip-album-title {
        font-weight: bold;
      }

      #details {
        padding: 420px 10% 0;
      }

      .card {
        height: 420px;
        border-radius: 3px;
        text-align: start;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
      }

      .card-left {
        width: 400px;
      }

      .card-right {
        padding: 24px;
      }

      .card-icon {
        border-radius: 50%;
        width: 60px;
        height: 60px;
        margin-right: 16px;
      }

      .card-album-title {
        font-size: 2em;
      }
      #map {
        height: 100%;
        left: 0px;
        top: 0px;
        position: relative;
        width: 100%;
      }
    </style>
		<div class="green">
      <esri-webmap webmapid="75e8e70b968b469ea4c4476df42a77bc" id="map">
      </esri-webmap>
    </div>
    <core-animated-pages selected="{{page}}" transitions="hero-transition" on-core-animated-pages-transition-end="{{complete}}">

      <section>

        <div class="chip-container" hero-p on-tap="{{transition}}">

          <template repeat="{{items as item}}">

            <template if="{{item.type=='comms' || item.type=='regs'}}">
            <div class="chip" hero-id="{{item.id}}" hero?="{{selectedAlbum === item }}">
              <div class="chip-top" layout vertical style="background:{{item.color}};" hero-id="{{item.id}}-art" hero?="{{selectedAlbum === item}}">
              <esri-chartjs data="{{item.data}}" kind="Doughnut" start style="padding-top:20px;margin:0px auto auto 50px;width:200px;height:200px;"></esri-chartjs>
              <div end layout horizontal center style="color:lemonchiffon;margin:10px;">{{ item.tagline }}</div>
              </div>
              <div class="chip-bottom">
                <div class="chip-album-title">{{item.album}}</div>
                <div class="chip-artist">{{item.artist}}</div>
              </div>
            </div>
            </template>
            
            <template if="{{item.type=='pays'}}">
            <div class="chip" hero-id="{{item.id}}" hero?="{{selectedAlbum === item }}">
              <div class="chip-top" layout vertical style="background:{{item.color}};" hero-id="{{item.id}}-art" hero?="{{selectedAlbum === item}}">
              <esri-pivotmaps-financepanel label="" style="margin-top:-20px;margin-left:20px;width:200px;height:200px;" max_value="385000" dollar_value="142100" id="esri_pivotmaps_financepanel"></esri-pivotmaps-financepanel>
                <div end layout horizontal center style="color:lemonchiffon;margin:10px;">{{ item.tagline }}</div>
              </div>
              <div class="chip-bottom">
                <div class="chip-album-title">{{item.album}}</div>
                <div class="chip-artist">{{item.artist}}</div>
              </div>
            </div>
            </template>
            
            <template if="{{item.type=='hots'}}">
            <div class="chip" hero-id="{{item.id}}" hero?="{{selectedAlbum === item }}">
              <div class="chip-top" layout vertical style="background:{{item.color}};" hero-id="{{item.id}}-art" hero?="{{selectedAlbum === item}}">
              <esri-chartjs data="{{item.data}}" start style="padding-top:20px;margin:0px auto auto 50px;width:200px;height:200px;"></esri-chartjs>
                <div end layout horizontal center style="color:lemonchiffon;margin:10px;">{{ item.tagline }}</div>
              </div>
              <div class="chip-bottom">
                <div class="chip-album-title">{{item.album}}</div>
                <div class="chip-artist">{{item.artist}}</div>
              </div>
            </div>
            </template>

          </template>

        </div>
      </section>

      <section id="details" on-tap="{{transition}}">

        <div class="card" layout horizontal hero-id="{{selectedAlbum.id}}" hero on-tap="{{transition}}">
          <div class="card-left" style="background:{{selectedAlbum.color}};" hero-id="{{selectedAlbum.id}}-art" hero on-tap="{{transition}}">
            <img src="/components/esri-html5/img/canmap.png" style="position:relative;width:60%;margin-top:20px;margin-left:50px;margin-right:auto;">
          </div>
          <div class="card-right" flex  on-tap="{{transition}}">
            <div layout horizontal center>
              <div>
                <div class="card-icon" style="background:{{selectedAlbum.color}};">
                  <core-icon icon="{{ selectedAlbum.icon }}" id="core_icon" style="color: lemonchiffon;margin: 18px auto auto 18px;"></core-icon>
                </div>
              </div>
              <div flex>
                <div class="card-album-title">{{selectedAlbum.album}}</div>
                <div class="card-album-artist">{{selectedAlbum.artist}}</div>
              </div>
            </div>
            <div layout vertical>
              <template if="{{selectedAlbum.type=='regs'}}">
              <span>In total, there are <font color="green"><strong>1800</strong></font> registered Home owners.</span><br/>
              <span>Of all registered sites, <font color="orange"><strong>421</strong></font> have been assessed.</span><br/>
              <span>There are <font color="red"><strong>1379</strong></font> still awaiting assesment.</span><br/>
              <br/><br/>
              <span><b>3</b> have been rated as <font color="red"><strong>High Contamination</strong></font> <br/></span>
              <span><b>123</b> have been rated as <font color="orange"><strong>Medium Contamination</strong></font> <br/></span>
              <span><b>321</b> have been rated as <font color="green"><strong>Low Contamination</strong></font> <br/></span><br/>
              <span>There are <font color="red"><strong>3</strong></font> site owners currently displaced due to remediation.</span><br/>
                <span>There are <font color="green"><strong>0</strong></font> sites allocated for demolition.</span><br/>
              </template>
            </div>
          </div>
        </div>

      </section>

    </core-animated-pages>

  </template>
  <script>

    Polymer('exec-dashboard', {

      page: 0,

      items: [
        { id:"a1",
         type:"comms",
         icon:"settings-phone",
         artist: "Average wait: 4.6 Days", 
         album: 'Communications', 
         color: '#0570b0',
         tagline:"132 Contacts outstanding",
         data:[
              {
                  value: 800,
                  color: "#46BFBD",
                  highlight: "#5AD3D1",
                  label: "CALL"
              },
              {
                  value: 132,
                  color:"#F7464A",
                  highlight: "#FF5A5E",
                  label: "NO CALL"
              }
          ]
        },
        { id:"a2",
         type:"regs",
         icon:"translate",
         artist: '18% sites Asessed', 
         album: 'Registration / Assessments', 
         color: '#3690c0',
         tagline:"1800 Reg. / 421 Assesed",
         data:[
              {
                  value: 1379,
                  color:"#F7464A",
                  highlight: "#FF5A5E",
                  label: "Reg."
              },
              {
                  value: 421,
                  color: "#46BFBD",
                  highlight: "#5AD3D1",
                  label: "Assesed"
              }
          ]
        },
        { id:"a3",
         type:"pays",
         icon:"shopping-cart",
         artist: '35% budget allocated',
         album: 'Assistance Payments', 
         color: '#74a9cf',
         tagline:"$142,100 paid Assistance",
         data:null 
        },
        { id:"a4",
         icon:"language",
         type:"hots",
         artist: 'Top Suburbs: Kambah, Evatt',
         album: 'Hot Spots',
         color: '#a6bddb',
         tagline:"4 active sites in Kambah",
         data:null 
        }
      ],

      selectedAlbum: null,

      transition: function(e) {
        if (this.page === 0 && e.target.templateInstance.model.item) {
          this.selectedAlbum = e.target.templateInstance.model.item;
          this.page = 1;
        } else {
          this.page = 0;
        }
      }
    });

  </script>

</polymer-element>