SFM-Broker/src/app/canvas/canvas.component.html

<h3 style="text-align:center"> this is canvas </h3>
<hr>
<kendo-menu>
    <kendo-menu-item text="My Web Site" icon="folder">
        <kendo-menu-item text="images" icon="folder">
          
            <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
            <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
            <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
        </kendo-menu-item>
        <kendo-menu-item text="resources" icon="folder">
            <kendo-menu-item text="pdf" icon="folder">
                <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
                <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
            </kendo-menu-item>
            <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
        </kendo-menu-item>
        <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
        <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
        <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
        <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
    </kendo-menu-item>
  </kendo-menu>
  <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>

  <bkp-divider-text>some text</bkp-divider-text>
  <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>
  <bkp-divider><kendo-icon [name]="'sum'"> </kendo-icon> &nbsp; Pending
  Payments</bkp-divider>
  
  <kendo-chart>
    <kendo-chart-title text="Units sold"></kendo-chart-title>

    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
            [title]="{ text: 'Months' }">
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>

    <!-- <kendo-chart-series-defaults [highlight]="{ inactiveOpacity: 0.3 }"> -->
    <!-- </kendo-chart-series-defaults> -->

    <kendo-chart-series>
      <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>   

  <hr>

<kendo-grid [data]="gridData" >
    <kendo-grid-column field="ProductID" title="ID" width="40">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Name" width="250">
    </kendo-grid-column>
    <kendo-grid-column field="Category.CategoryName" title="Category">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Price" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

<hr>