Update layout

PioneerCode · Jul 25, 2024 · 778372f · 778372f
1 parent a74500d
commit 778372f
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 72 deletions.
diff --git a/projects/pioneer-charts-web/src/app/app.routes.ts b/projects/pioneer-charts-web/src/app/app.routes.ts
@@ -6,15 +6,16 @@ import { ThemeComponent } from './pages/docs/guides/theme/theme.component';
 import { DataContractComponent } from './pages/docs/guides/data-contract/data-contract.component';
 import { ChartsComponent } from './pages/charts/charts.component';
 import { BarChartComponent } from './pages/docs/components/charts/bar-chart/bar-chart.component';
+import { LineAreaChartComponent } from './pages/docs/components/charts/line-area-chart/line-area-chart.component';
+import { PieChartComponent } from './pages/docs/components/charts/pie-chart/pie-chart.component';
 
 export const routes: Routes = [
   { path: 'docs/guides/introduction', component: IntroductionComponent },
   { path: 'docs/guides/data-contract', component: DataContractComponent },
   { path: 'docs/guides/theme', component: ThemeComponent },
   { path: 'docs/components/charts/bar-chart', component: BarChartComponent },
-  // { path: 'docs/components/charts/line-area-chart', component: LineAreaChartComponent },
-  // { path: 'docs/components/charts/table', component: TableComponent },
-  // { path: 'docs/components/charts/pie-chart', component: PieChartComponent},
+  { path: 'docs/components/charts/line-area-chart', component: LineAreaChartComponent },
+  { path: 'docs/components/charts/pie-chart', component: PieChartComponent},
   { path: 'charts', component: ChartsComponent },
   { path: '**', component: HomeComponent }
 ];
diff --git a/projects/pioneer-charts-web/src/app/components/base-config/base-config.component.ts b/projects/pioneer-charts-web/src/app/components/base-config/base-config.component.ts
@@ -1,11 +1,10 @@
 import { Component, Input } from '@angular/core';
-import { environment } from '../../../environments/environment';
-import { AppService } from '../../app.service';
 
 @Component({
-  selector: 'pc-base-config',
+  selector: 'app-base-config',
   templateUrl: './base-config.component.html',
-  styleUrls: ['./base-config.component.scss']
+  styleUrls: ['./base-config.component.scss'],
+  standalone: true
 })
 export class BaseConfigComponent  {
   @Input() includeTickFormat = false;

diff --git a/projects/pioneer-charts-web/src/app/layouts/doc/doc-nav/doc-nav.component.html b/projects/pioneer-charts-web/src/app/layouts/doc/doc-nav/doc-nav.component.html
@@ -34,12 +34,6 @@
           Pie Chart
         </a>
       </li>
-      <li class="nav-item">
-        <a routerLink="/docs/components/charts/table" class="nav-link" [ngClass]="{'active': service.currentDocRoute === 'table'}"
-          (click)="service.currentDocRoute = 'table'">
-          Table
-        </a>
-      </li>
     </ul>
   </div>
 </nav>
diff --git a/projects/pioneer-charts-web/src/app/layouts/footer/footer.component.html b/projects/pioneer-charts-web/src/app/layouts/footer/footer.component.html
@@ -30,12 +30,6 @@ <h5>
           Charts
         </a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link" href="https://tree.pioneercode.com" title="Pioneer Tree">Pioneer Tree</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="https://pioneercode.com" title="Pioneer Code Blog">Pioneer Blog</a>
-      </li>
     </ul>
     <ul class="nav justify-content-center social">
       <li class="nav-item">

diff --git a/...ioneer-charts-web/src/app/pages/docs/components/charts/bar-chart/bar-chart.component.html b/...ioneer-charts-web/src/app/pages/docs/components/charts/bar-chart/bar-chart.component.html
@@ -62,45 +62,50 @@ <h6 id="vertical">Vertical</h6>
     <div class="col">
       <h3 id="api">API</h3>
       <!-- <pc-prism language="typescript" [code]="importCode"></pc-prism> -->
-      <!-- <pc-base-config [includeTickFormat]="true" [includeHideAxisAndGrid]="true">
-            <tbody style="border-top: none;">
-              <tr>
-                <td>domainMax</td>
-                <td>Highest value in domain of data.</td>
-              </tr>
-              <tr>
-                <td>isGroup</td>
-                <td>If set to true, 2-dimensional data sets will be displayed as a group in n of the first dimension. If false,
-                  the group will produce a stack bar set. It is recommended in that when configured in the false state, your
-                  data is ordered highest to lowest so a bar does not get covered on the UI due to a back to front stack
-                  order.
-                </td>
-              </tr>
-              <tr>
-                <td>thresholds</td>
-                <td>Threshold are configure using the same structure as
-                  <a routerLink="/docs/guides/data-contract">IPcacData</a>.
-                  <ul style="margin: 0">
-                    <li>If the thresholds variable is left empty, you will get no thresholds on the UI.</li>
-                    <li>If there is one object in the first dimension with no objects in that "data" variable of that object,
-                      you will get a threshold that spans the entire chart.</li>
-                    <li>If there is more then one object "value" in the first dimension with no objects in each "data" variable,
-                      you will get a threshold that spans the each group in the data set.</li>
-                    <li>If there is more then one object "value" in the first dimension with in each "data" variable, you will
-                      get a threshold that spans the each bar of each group in the data set.</li>
-                  </ul>
-                </td>
-              </tr>
-              <tr>
-                <td>spreadColorsPerGroup</td>
-                <td>If set to true spread current color collection across groups by index, instead of bars in a group.</td>
-              </tr>
-              <tr>
-                <td>colorOverride.colors</td>
-                <td>Add a collection of hex colors to override the color service per chart. "#" must be included in each value of the collection.</td>
-              </tr>
-            </tbody>
-          </pc-base-config> -->
+      <app-base-config [includeTickFormat]="true" [includeHideAxisAndGrid]="true">
+        <tbody style="border-top: none;">
+          <tr>
+            <td>domainMax</td>
+            <td>Highest value in domain of data.</td>
+          </tr>
+          <tr>
+            <td>isGroup</td>
+            <td>If set to true, 2-dimensional data sets will be displayed as a group in n of the first dimension. If
+              false,
+              the group will produce a stack bar set. It is recommended in that when configured in the false state, your
+              data is ordered highest to lowest so a bar does not get covered on the UI due to a back to front stack
+              order.
+            </td>
+          </tr>
+          <tr>
+            <td>thresholds</td>
+            <td>Threshold are configure using the same structure as
+              <a routerLink="/docs/guides/data-contract">IPcacData</a>.
+              <ul style="margin: 0">
+                <li>If the thresholds variable is left empty, you will get no thresholds on the UI.</li>
+                <li>If there is one object in the first dimension with no objects in that "data" variable of that
+                  object,
+                  you will get a threshold that spans the entire chart.</li>
+                <li>If there is more then one object "value" in the first dimension with no objects in each "data"
+                  variable,
+                  you will get a threshold that spans the each group in the data set.</li>
+                <li>If there is more then one object "value" in the first dimension with in each "data" variable, you
+                  will
+                  get a threshold that spans the each bar of each group in the data set.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr>
+            <td>spreadColorsPerGroup</td>
+            <td>If set to true spread current color collection across groups by index, instead of bars in a group.</td>
+          </tr>
+          <tr>
+            <td>colorOverride.colors</td>
+            <td>Add a collection of hex colors to override the color service per chart. "#" must be included in each
+              value of the collection.</td>
+          </tr>
+        </tbody>
+      </app-base-config>
     </div>
   </div>
   <h3 id="events">Events</h3>

diff --git a/.../pioneer-charts-web/src/app/pages/docs/components/charts/bar-chart/bar-chart.component.ts b/.../pioneer-charts-web/src/app/pages/docs/components/charts/bar-chart/bar-chart.component.ts
@@ -5,6 +5,7 @@ import { DocLayoutComponent } from 'projects/pioneer-charts-web/src/app/layouts/
 import { PageHeaderComponent } from 'projects/pioneer-charts-web/src/app/layouts/page-header/page-header.component';
 import { PcacBarChartHorizontalComponent, PcacBarVerticalChartComponent } from '@pioneer-code/pioneer-charts';
 import { MatCardModule } from '@angular/material/card';
+import { BaseConfigComponent } from 'projects/pioneer-charts-web/src/app/components/base-config/base-config.component';
 
 @Component({
   selector: 'pc-bar-chart',
@@ -14,6 +15,7 @@ import { MatCardModule } from '@angular/material/card';
     MatCardModule,
     PageHeaderComponent,
     DocLayoutComponent,
+    BaseConfigComponent,
     PcacBarChartHorizontalComponent,
     PcacBarVerticalChartComponent
   ]

diff --git a/...s-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.html b/...s-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.html
@@ -1,28 +1,25 @@
-<pc-doc-layout [jumpNav]="jumpNav">
+<app-doc-layout [jumpNav]="jumpNav">
   <div class="container-fluid">
     <section class="pc-doc-section">
-      <pc-page-header [title]="'Line Area Chart'" [anchor]="'line-area-chart'"></pc-page-header>
+      <app-page-header [title]="'Line Area Chart'" [anchor]="'line-area-chart'"></app-page-header>
       <p class="lead">Configurable to display an area or line chart.</p>
     </section>
     <section class="pc-doc-section">
       <div class="row pc-row">
         <div class="col-sm">
           <div class="pc-chart-container">
-            <!-- <pcac-header [config]="{'title':'Line Chart'}"></pcac-header> -->
             <pcac-line-area-chart [config]="pcService.lineChartConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
           </div>
         </div>
         <div class="col-sm">
           <div class="pc-chart-container">
-            <!-- <pcac-header [config]="{'title':'Area Chart'}"></pcac-header> -->
             <pcac-line-area-chart [config]="pcService.areaChartConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-sm">
           <div class="pc-chart-container">
-            <!-- <pcac-header [config]="{'title':'Area Chart: Hide Axis & Grid'}"></pcac-header> -->
             <pcac-line-area-chart [config]="pcService.areaChartHideConfig" (dotClicked)="pcService.onClicked($event)"></pcac-line-area-chart>
           </div>
         </div>
@@ -41,7 +38,7 @@ <h3>Markup</h3>
         <div class="col-sm">
           <h3>API</h3>
           <!-- <pc-prism language="javascript" [code]="importCode"></pc-prism> -->
-          <pc-base-config [includeHideAxisAndGrid]="true">
+          <app-base-config [includeHideAxisAndGrid]="true">
             <tbody style="border-top: none;">
               <tr>
                 <td>domainMax</td>
@@ -60,7 +57,7 @@ <h3>API</h3>
                 <td>If true, on hover, ui will display continues values of all lines to the user.</td>
               </tr>
             </tbody>
-          </pc-base-config>
+          </app-base-config>
         </div>
       </div>
     </section>
@@ -98,4 +95,4 @@ <h3 id="contract">Contract</h3>
       </div>
     </section>
   </div>
-</pc-doc-layout>
+</app-doc-layout>
diff --git a/...s-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.scss b/...s-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.scss
diff --git a/...rts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts b/...rts-web/src/app/pages/docs/components/charts/line-area-chart/line-area-chart.component.ts
@@ -1,11 +1,23 @@
 import { Component } from '@angular/core';
 import { AppService } from '../../../../../app.service';
 import { IJumpNav, JumpNavLevel } from '../../../../../layouts/jump-nav/jump-nav.component';
+import { MatCardModule } from '@angular/material/card';
+import { PcacLineAreaChartComponent } from '@pioneer-code/pioneer-charts';
+import { BaseConfigComponent } from 'projects/pioneer-charts-web/src/app/components/base-config/base-config.component';
+import { DocLayoutComponent } from 'projects/pioneer-charts-web/src/app/layouts/doc/doc.component';
+import { PageHeaderComponent } from 'projects/pioneer-charts-web/src/app/layouts/page-header/page-header.component';
 
 @Component({
   selector: 'pc-line-area-chart',
   templateUrl: './line-area-chart.component.html',
-  styleUrls: ['./line-area-chart.component.scss']
+  standalone: true,
+  imports: [
+    MatCardModule,
+    PcacLineAreaChartComponent,
+    BaseConfigComponent,
+    DocLayoutComponent,
+    PageHeaderComponent
+  ]
 })
 export class LineAreaChartComponent {
   jumpNav = [

diff --git a/...ioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.html b/...ioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.html
@@ -1,7 +1,7 @@
-<pc-doc-layout [jumpNav]="jumpNav">
+<app-doc-layout [jumpNav]="jumpNav">
   <div class="container-fluid">
     <section class="pc-doc-section">
-      <pc-page-header [title]="'Pie Chart'" [anchor]="'pie-chart'"></pc-page-header>
+      <app-page-header [title]="'Pie Chart'" [anchor]="'pie-chart'"></app-page-header>
       <p class="lead">Pie chart component with beautiful animated transitions.</p>
     </section>
     <section class="pc-doc-section">
@@ -27,7 +27,7 @@ <h3>Markup</h3>
         <div class="col-sm">
           <h3>API</h3>
           <!-- <pc-prism language="javascript" [code]="importCode"></pc-prism> -->
-          <pc-base-config></pc-base-config>
+          <app-base-config></app-base-config>
         </div>
       </div>
     </section>
@@ -65,4 +65,4 @@ <h3 id="contract">Contract</h3>
       </div>
     </section>
   </div>
-</pc-doc-layout>
+</app-doc-layout>
diff --git a/...ioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.scss b/...ioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.scss
diff --git a/.../pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts b/.../pioneer-charts-web/src/app/pages/docs/components/charts/pie-chart/pie-chart.component.ts
@@ -1,11 +1,23 @@
 import { Component, OnInit } from '@angular/core';
 import { AppService } from '../../../../../app.service';
 import { IJumpNav, JumpNavLevel } from '../../../../../layouts/jump-nav/jump-nav.component';
+import { PcacPieChartComponent } from '@pioneer-code/pioneer-charts';
+import { MatCardModule } from '@angular/material/card';
+import { BaseConfigComponent } from 'projects/pioneer-charts-web/src/app/components/base-config/base-config.component';
+import { DocLayoutComponent } from 'projects/pioneer-charts-web/src/app/layouts/doc/doc.component';
+import { PageHeaderComponent } from 'projects/pioneer-charts-web/src/app/layouts/page-header/page-header.component';
 
 @Component({
   selector: 'pc-pie-chart',
   templateUrl: './pie-chart.component.html',
-  styleUrls: ['./pie-chart.component.scss']
+  standalone: true,
+  imports: [
+    MatCardModule,
+    PcacPieChartComponent,
+    BaseConfigComponent,
+    DocLayoutComponent,
+    PageHeaderComponent
+  ]
 })
 export class PieChartComponent {
   jumpNav = [