last works on x-chart component ...
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
<v-page
|
||||
[hasSide]="true"
|
||||
[toolbarTitle]="toolbarTitle"
|
||||
[toolbarSubTitle]="toolbarSubTitle"
|
||||
[toolbarShowSubTitle]="toolbarShowSubTitle"
|
||||
>
|
||||
<!-- Content -->
|
||||
<x-card [isInPage]="true" [showActions]="true" [color]="ColorNames.Light">
|
||||
<!-- Content -->
|
||||
<x-markdown
|
||||
[mode]="'preview'"
|
||||
[hasToolbar]="false"
|
||||
[content]="getContent('content')"
|
||||
></x-markdown>
|
||||
|
||||
<!-- Sample -->
|
||||
<x-markdown
|
||||
[mode]="'preview'"
|
||||
[content]="sample1"
|
||||
[hasToolbar]="false"
|
||||
[cssClass]="'code-block'"
|
||||
></x-markdown>
|
||||
</x-card>
|
||||
|
||||
<!-- Component -->
|
||||
<x-chart
|
||||
class="v-card"
|
||||
[type]="'bar'"
|
||||
[isInPage]="true"
|
||||
[cardTitle]="'Chart'"
|
||||
[wrapWithCard]="true"
|
||||
[series]="chartSeries"
|
||||
[options]="chartOptions"
|
||||
(chartRendered)="onChartReady()"
|
||||
>
|
||||
</x-chart>
|
||||
</v-page>
|
||||
@@ -0,0 +1,143 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { isNullOrEmptyString } from 'x-framework-core';
|
||||
import { VPageComponent } from '../../../views/v-page/v-page.component';
|
||||
import { AppResourceIDs } from 'src/app/config/app.localization.config';
|
||||
import { XChartOptions, XChartSeriesType } from 'x-framework-components';
|
||||
|
||||
@Component({
|
||||
selector: 'app-chart',
|
||||
templateUrl: './chart.page.html',
|
||||
styleUrls: ['./chart.page.scss'],
|
||||
})
|
||||
export class ChartPage extends VPageComponent {
|
||||
//
|
||||
//#region Props ...
|
||||
toolbarShowSubTitle = true;
|
||||
titleRes = AppResourceIDs.form;
|
||||
toolbarTitle = this.resourceProvider(this.titleRes);
|
||||
toolbarSubTitle = this.resourceProvider(AppResourceIDs.form_description);
|
||||
|
||||
readonly contentFa = `
|
||||
# ${this.toolbarTitle}
|
||||
|
||||
این مولفه جهت نمایش انواع چارت های مختلف در برنامه ها بکار می رود ...
|
||||
`;
|
||||
readonly contentEn = `
|
||||
# ${this.toolbarTitle}
|
||||
|
||||
this Component used for draw Charts on Applications ...
|
||||
`;
|
||||
|
||||
readonly sample1 =
|
||||
'```html' +
|
||||
`
|
||||
<x-chart
|
||||
[series]="props.series"
|
||||
[options]="props.options"
|
||||
[cssClass]="props.cssClass"
|
||||
[isInPage]="props.isInPage"
|
||||
[cardColor]="props.cardColor"
|
||||
[cardTitle]="props.cardTitle"
|
||||
[autoUpdate]="props.autoUpdate"
|
||||
(zoomed)="props.zoomed($event)"
|
||||
[wrapWithCard]="props.wrapWithCard"
|
||||
[cardCssClass]="props.cardCssClass"
|
||||
[cardSubTitle]="props.cardSubTitle"
|
||||
[cardShowFooter]="props.cardShowFooter"
|
||||
[actionProvider]="props.actionProvider"
|
||||
[cardShowActions]="props.cardShowActions"
|
||||
(chartRendered)="props.chartRendered($event)"
|
||||
[cardActionProvider]="props.cardActionProvider"
|
||||
[cardForegroundColor]="props.cardForegroundColor"
|
||||
(dataPointSelected)="props.dataPointSelected($event)"
|
||||
>
|
||||
</x-chart>
|
||||
` +
|
||||
'```';
|
||||
|
||||
//
|
||||
chartSeries: XChartSeriesType = [
|
||||
{
|
||||
name: 'فروش',
|
||||
data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
|
||||
},
|
||||
];
|
||||
|
||||
//
|
||||
chartOptions: XChartOptions = {
|
||||
chart: {
|
||||
type: 'line',
|
||||
height: 350,
|
||||
fontFamily: 'Vazirmatn, sans-serif', // فونت فارسی
|
||||
toolbar: { show: true },
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
'فروردین',
|
||||
'اردیبهشت',
|
||||
'خرداد',
|
||||
'تیر',
|
||||
'مرداد',
|
||||
'شهریور',
|
||||
'مهر',
|
||||
'آبان',
|
||||
'آذر',
|
||||
],
|
||||
},
|
||||
stroke: { curve: 'smooth', width: 3 },
|
||||
markers: { size: 5 },
|
||||
title: {
|
||||
text: 'نمودار فروش ماهانه',
|
||||
align: 'center',
|
||||
style: { fontSize: '16px', fontWeight: 'bold' },
|
||||
},
|
||||
tooltip: { theme: 'dark' },
|
||||
dataLabels: { enabled: false },
|
||||
};
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region UI Providers ...
|
||||
/**
|
||||
* read specified variable content based on current locale ...
|
||||
*
|
||||
* @param title which var can read ...
|
||||
*
|
||||
* @returns string content ...
|
||||
*/
|
||||
getContent(title: string) {
|
||||
//
|
||||
if (isNullOrEmptyString(title)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
//
|
||||
const currentLocale = this.managerService.currentLocale;
|
||||
|
||||
//
|
||||
const varName =
|
||||
title +
|
||||
(currentLocale === 'en-US'
|
||||
? 'En'
|
||||
: currentLocale === 'fa-IR'
|
||||
? 'Fa'
|
||||
: '');
|
||||
|
||||
const result = (this as any)[`${varName}`];
|
||||
|
||||
//
|
||||
return result || '';
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region UI Handlers ...
|
||||
async onChartReady() {
|
||||
// //
|
||||
// await this.managerService.notificationService.presentSuccessNotification({
|
||||
// message: this.resourceProvider(AppResourceIDs.temp_label),
|
||||
// dissmissable: true,
|
||||
// });
|
||||
}
|
||||
//#endregion
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FabPage } from './fab/fab.page';
|
||||
import { MapPage } from './map/map.page';
|
||||
import { IdePage } from './ide/ide.page';
|
||||
import { FormPage } from './form/form.page';
|
||||
import { GridPage } from './grid/grid.page';
|
||||
import { ListPage } from './list/list.page';
|
||||
@@ -8,6 +9,7 @@ import { IconPage } from './icon/icon.page';
|
||||
import { CardPage } from './card/card.page';
|
||||
import { PagePage } from './page/page.page';
|
||||
import { TabsPage } from './tabs/tabs.page';
|
||||
import { TreePage } from './tree/tree.page';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { TablePage } from './table/table.page';
|
||||
@@ -27,7 +29,7 @@ import { DescriptionListPage } from './description-list/description-list.page';
|
||||
import { SmallComponentsPage } from './small-components/small-components.page';
|
||||
import { ExpandablePanelPage } from './expandable-panel/expandable-panel.page';
|
||||
import { SampleModalComponent } from './small-components/sample-modal/sample-modal.component';
|
||||
import { TreePage } from './tree/tree.page';
|
||||
import { ChartPage } from './chart/chart.page';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@@ -51,6 +53,14 @@ import { TreePage } from './tree/tree.page';
|
||||
path: ComponentsRoutes.Card,
|
||||
component: CardPage,
|
||||
},
|
||||
{
|
||||
path: ComponentsRoutes.Ide,
|
||||
component: IdePage,
|
||||
},
|
||||
{
|
||||
path: ComponentsRoutes.Chart,
|
||||
component: ChartPage,
|
||||
},
|
||||
{
|
||||
path: ComponentsRoutes.Icon,
|
||||
component: IconPage,
|
||||
@@ -138,6 +148,7 @@ import { TreePage } from './tree/tree.page';
|
||||
]),
|
||||
],
|
||||
declarations: [
|
||||
IdePage,
|
||||
FabPage,
|
||||
MapPage,
|
||||
CardPage,
|
||||
@@ -148,6 +159,7 @@ import { TreePage } from './tree/tree.page';
|
||||
ListPage,
|
||||
TabsPage,
|
||||
TreePage,
|
||||
ChartPage,
|
||||
TablePage,
|
||||
SliderPage,
|
||||
StepperPage,
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
<v-page
|
||||
[hasSide]="true"
|
||||
[toolbarTitle]="toolbarTitle"
|
||||
[toolbarSubTitle]="toolbarSubTitle"
|
||||
[toolbarShowSubTitle]="toolbarShowSubTitle"
|
||||
>
|
||||
<!-- Content -->
|
||||
<x-card [isInPage]="true" [showActions]="true" [color]="ColorNames.Light">
|
||||
<!-- Content -->
|
||||
<x-markdown
|
||||
[mode]="'preview'"
|
||||
[hasToolbar]="false"
|
||||
[content]="getContent('content')"
|
||||
></x-markdown>
|
||||
|
||||
<!-- Sample -->
|
||||
<x-markdown
|
||||
[mode]="'preview'"
|
||||
[content]="sample1"
|
||||
[hasToolbar]="false"
|
||||
[cssClass]="'code-block'"
|
||||
></x-markdown>
|
||||
</x-card>
|
||||
|
||||
<!-- IDE -->
|
||||
<x-ide
|
||||
[fontSize]="18"
|
||||
[isInPage]="true"
|
||||
[wrapWithCard]="true"
|
||||
[content]="ideContent"
|
||||
[cardTitle]="toolbarTitle"
|
||||
[cardSubTitle]="toolbarSubTitle"
|
||||
[actionBarColor]="ColorNames.Dark"
|
||||
[defaultActionBarItemColor]="ColorNames.Light"
|
||||
>
|
||||
</x-ide>
|
||||
</v-page>
|
||||
@@ -0,0 +1,153 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { isNullOrEmptyString } from 'x-framework-core';
|
||||
import { VPageComponent } from '../../../views/v-page/v-page.component';
|
||||
import { AppResourceIDs } from 'src/app/config/app.localization.config';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ide',
|
||||
templateUrl: './ide.page.html',
|
||||
styleUrls: ['./ide.page.scss'],
|
||||
})
|
||||
export class IdePage extends VPageComponent {
|
||||
//
|
||||
//#region Props ...
|
||||
titleRes = AppResourceIDs.ide;
|
||||
toolbarShowSubTitle = true;
|
||||
toolbarTitle = this.resourceProvider(this.titleRes);
|
||||
toolbarSubTitle = this.resourceProvider(AppResourceIDs.ide_description);
|
||||
|
||||
readonly contentFa = `
|
||||
# ${this.toolbarTitle}
|
||||
|
||||
این مولفه جهت نمایش محتوای کدهای منبع و ویرایش آن ها بکار می رود..
|
||||
`;
|
||||
readonly contentEn = `
|
||||
# ${this.toolbarTitle}
|
||||
|
||||
this Component used for show and edit Code sources.
|
||||
`;
|
||||
|
||||
readonly sample1 =
|
||||
'```html' +
|
||||
`
|
||||
<x-ide
|
||||
[mode]="props.mode"
|
||||
[theme]="props.theme"
|
||||
[content]="props.content"
|
||||
[cssClass]="props.cssClass"
|
||||
[minLines]="props.minLines"
|
||||
[maxLines]="props.maxLines"
|
||||
[fontSize]="props.fontSize"
|
||||
[readonly]="props.readonly"
|
||||
[isInPage]="props.isInPage"
|
||||
[alignTabs]="props.alignTabs"
|
||||
[cardColor]="props.cardColor"
|
||||
[cardTitle]="props.cardTitle"
|
||||
[cardSubTitle]="props.cardSubTitle"
|
||||
[wordWrapping]="props.wordWrapping"
|
||||
[wrapWithCard]="props.wrapWithCard"
|
||||
[cardCssClass]="props.cardCssClass"
|
||||
[showActionBar]="props.showActionBar"
|
||||
[actionBarColor]="props.actionBarColor"
|
||||
[cardShowFooter]="props.cardShowFooter"
|
||||
[defaultTabName]="props.defaultTabName"
|
||||
[actionProvider]="props.actionProvider"
|
||||
[tabHeaderColor]="props.tabHeaderColor"
|
||||
[activeTabColor]="props.activeTabColor"
|
||||
[cardShowActions]="props.cardShowActions"
|
||||
[showLineNumbers]="props.showLineNumbers"
|
||||
[showPrintMargin]="props.showPrintMargin"
|
||||
[showFoldWidgets]="props.showFoldWidgets"
|
||||
[actionBarActions]="props.actionBarActions"
|
||||
[actionBarCssClass]="props.actionBarCssClass"
|
||||
(contentChange)="props.contentChange($event)"
|
||||
[cardActionProvider]="props.cardActionProvider"
|
||||
[highlightActiveLine]="props.highlightActiveLine"
|
||||
[cardForegroundColor]="props.cardForegroundColor"
|
||||
[basicAutocompletion]="props.basicAutocompletion"
|
||||
[hasCloseOnDefaultTab]="props.hasCloseOnDefaultTab"
|
||||
[availableActionBarItems]="props.availableActionBarItems"
|
||||
[actionBarActionProvider]="props.actionBarActionProvider"
|
||||
(actionBarActionFired)="props.actionBarActionFired($event)"
|
||||
[actionBarForegroundColor]="props.actionBarForegroundColor"
|
||||
[defaultActionBarItemColor]="props.defaultActionBarItemColor"
|
||||
>
|
||||
</x-ide>` +
|
||||
'```';
|
||||
|
||||
ideContent = `
|
||||
import {
|
||||
XBaseDataPagerQuery,
|
||||
XBaseDataPagerQueryResult,
|
||||
} from 'x-framework-core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
import { XQueryDto, XQueryResultDto } from '../models/x-query.dto';
|
||||
|
||||
export function toXQuery(
|
||||
q: XBaseDataPagerQuery,
|
||||
containsDetail = true,
|
||||
enableTracking = false,
|
||||
sortBy = 'id',
|
||||
isAscending = true
|
||||
) {
|
||||
return {
|
||||
filter: q.filter,
|
||||
containsDetail,
|
||||
enableTracking,
|
||||
sortBy,
|
||||
isAscending,
|
||||
page: q.pageNumber,
|
||||
pageSize: q.rowsInPage,
|
||||
} as XQueryDto;
|
||||
}
|
||||
|
||||
export function applyToDataPagerQueryResult<T>(
|
||||
result: Observable<XQueryResultDto<T>>
|
||||
) {
|
||||
return result.pipe(
|
||||
map((queryResult) => {
|
||||
return {
|
||||
count: queryResult.totalItems || 0,
|
||||
items: queryResult.items || [],
|
||||
} as XBaseDataPagerQueryResult<T>;
|
||||
})
|
||||
);
|
||||
}
|
||||
`;
|
||||
//#endregion
|
||||
|
||||
//
|
||||
//#region UI Providers ...
|
||||
/**
|
||||
* read specified variable content based on current locale ...
|
||||
*
|
||||
* @param title which var can read ...
|
||||
*
|
||||
* @returns string content ...
|
||||
*/
|
||||
getContent(title: string) {
|
||||
//
|
||||
if (isNullOrEmptyString(title)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
//
|
||||
const currentLocale = this.managerService.currentLocale;
|
||||
|
||||
//
|
||||
const varName =
|
||||
title +
|
||||
(currentLocale === 'en-US'
|
||||
? 'En'
|
||||
: currentLocale === 'fa-IR'
|
||||
? 'Fa'
|
||||
: '');
|
||||
|
||||
const result = (this as any)[`${varName}`];
|
||||
|
||||
//
|
||||
return result || '';
|
||||
}
|
||||
//#endregion
|
||||
}
|
||||
Reference in New Issue
Block a user