-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature/xml json beautifier component (#1929)
* Started on hightlight.js * syntax highlight on xml * syntax highlight for xml and json * Not needed * Not needed * chore: add license * pin version * out of sync * chore: Update PRODUCTION_DEPENDENCIES.md * style: format * Chore: bump version to 0.3.309 for build/infrastructure/eo/chart/Chart.yaml * Chore: bump version to 0.3.309 for build/infrastructure/eo/chart/values.yaml * Fixed code smell * Feedback changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
- Loading branch information
Showing
20 changed files
with
348 additions
and
10 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,4 +2,4 @@ app: | |
| replicaCount: 2 | ||
| image: | ||
| name: ghcr.io/energinet-datahub/eo-frontend-app | ||
| tag: 0.3.308 | ||
| tag: 0.3.309 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Energinet DataHub A/S | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License2"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| export { WattCodeComponent } from './watt-code.component'; |
60 changes: 60 additions & 0 deletions
60
libs/ui-watt/src/lib/components/code/watt-code.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Energinet DataHub A/S | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License2"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| watt-code { | ||
| display: block; | ||
| overflow: auto; | ||
|
|
||
| pre { | ||
| display: flex; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| word-wrap: break-word; | ||
|
|
||
| code { | ||
| flex: 1; | ||
| line-height: 1.8em; | ||
| font-size: 14px; | ||
| min-height: 100%; | ||
| padding: 1em 1.2em; | ||
|
|
||
| table.hljs-ln { | ||
| border-collapse: separate; | ||
| border-spacing: 0; | ||
| border: 1px solid var(--watt-color-neutral-grey-300); | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| td.hljs-ln-line.hljs-ln-code { | ||
| padding-left: var(--watt-space-ml); | ||
| } | ||
|
|
||
| td.hljs-ln-line.hljs-ln-numbers { | ||
| user-select: none; | ||
| border-left: 1px solid var(--watt-color-neutral-grey-300); | ||
| border-right: 1px solid var(--watt-color-neutral-grey-300); | ||
| padding-right: var(--watt-space-l); | ||
| padding-left: var(--watt-space-m); | ||
| background: var(--watt-color-primary-ultralight); | ||
| color: var(--watt-color-primary-dark); | ||
| } | ||
|
|
||
| span.hljs-tag span.hljs-attr::before { | ||
| content: "\a"; | ||
| } | ||
| } | ||
| } | ||
| } |
39 changes: 39 additions & 0 deletions
39
libs/ui-watt/src/lib/components/code/watt-code.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Energinet DataHub A/S | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License2"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| import { Component, ChangeDetectionStrategy, Input, ViewEncapsulation } from '@angular/core'; | ||
| import { HighlightModule } from 'ngx-highlightjs'; | ||
|
|
||
| type languages = 'xml' | 'json'; | ||
|
|
||
| @Component({ | ||
| selector: 'watt-code', | ||
| template: ` | ||
| <pre> | ||
| <code [highlight]="code" [lineNumbers]="lineNumbers" [languages]="languages"></code> | ||
| </pre> | ||
| `, | ||
| styleUrls: ['./watt-code.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| encapsulation: ViewEncapsulation.None, | ||
| standalone: true, | ||
| imports: [HighlightModule], | ||
| }) | ||
| export class WattCodeComponent { | ||
| @Input({ required: true }) code: string | null = null; | ||
| @Input() languages!: languages[]; | ||
| @Input() lineNumbers = true; | ||
| } |
165 changes: 165 additions & 0 deletions
165
libs/ui-watt/src/lib/components/code/watt-code.stories.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| /** | ||
| * @license | ||
| * Copyright 2020 Energinet DataHub A/S | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License2"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| import { Meta, StoryFn, applicationConfig } from '@storybook/angular'; | ||
|
|
||
| import { WattCodeComponent } from './watt-code.component'; | ||
| import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; | ||
|
|
||
| const meta: Meta<WattCodeComponent> = { | ||
| title: 'Components/Code', | ||
| component: WattCodeComponent, | ||
| decorators: [ | ||
| applicationConfig({ | ||
| providers: [ | ||
| { | ||
| provide: HIGHLIGHT_OPTIONS, | ||
| useValue: { | ||
| coreLibraryLoader: () => import('highlight.js/lib/core'), | ||
| lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), | ||
| languages: { | ||
| xml: () => import('highlight.js/lib/languages/xml'), | ||
| json: () => import('highlight.js/lib/languages/json'), | ||
| }, | ||
| }, | ||
| }, | ||
| ], | ||
| }), | ||
| ], | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| const Template: StoryFn = (args) => ({ | ||
| props: args, | ||
| template: ` | ||
| <watt-code | ||
| [code]=code | ||
| [languages]=languages | ||
| [lineNumbers]=lineNumbers | ||
| /> | ||
| `, | ||
| }); | ||
|
|
||
| export const XmlWithLineNumbers = Template.bind({}); | ||
|
|
||
| XmlWithLineNumbers.args = { | ||
| code: `<?xml version="1.0" encoding="UTF-8"?> | ||
| <!--Sample XML file generated by XMLSpy v2021 (x64) (http://www.altova.com)--> | ||
| <cim:RequestChangeAccountingPointCharacteristics_MarketDocument xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:cim="urn:ebix:org:ChangeAccountingPointCharacteristics:0:1" xsi:schemaLocation="urn:ebix:org:ChangeAccountingPointCharacteristics:0:1 urn-ediel-org-RSM-021-ChangeOfAccountingPointCharacteristics-RequestChangeOfAccountingPointCharacteristics-0-1.xsd"> | ||
| <cim:mRID>String</cim:mRID> | ||
| <cim:type>E58</cim:type> | ||
| <cim:process.processType>E02</cim:process.processType> | ||
| <cim:businessSector.type>E16</cim:businessSector.type> | ||
| <cim:sender_MarketParticipant.mRID codingScheme="NMK">a</cim:sender_MarketParticipant.mRID> | ||
| <cim:sender_MarketParticipant.marketRole.type>A08</cim:sender_MarketParticipant.marketRole.type> | ||
| <cim:receiver_MarketParticipant.mRID codingScheme="NFI">a</cim:receiver_MarketParticipant.mRID> | ||
| <cim:receiver_MarketParticipant.marketRole.type>A33</cim:receiver_MarketParticipant.marketRole.type> | ||
| <cim:createdDateTime>2001-12-17T09:30:47Z</cim:createdDateTime> | ||
| <cim:MktActivityRecord> | ||
| <cim:mRID>whateverasdasd</cim:mRID> | ||
| <cim:MarketEvaluationPoint> | ||
| <cim:mRID codingScheme="NNL">571313180400012882</cim:mRID> | ||
| <cim:type>E17</cim:type> | ||
| <cim:description>String</cim:description> | ||
| <cim:settlementMethod>D01</cim:settlementMethod> | ||
| <cim:meteringMethod>D01</cim:meteringMethod> | ||
| <cim:meteredDataCollectionMethod>D01</cim:meteredDataCollectionMethod> | ||
| <cim:netSettlementGroup>0</cim:netSettlementGroup> | ||
| <cim:productionObligation>false</cim:productionObligation> | ||
| <cim:mPConnectionType>D01</cim:mPConnectionType> | ||
| <cim:readCycle>PT1H</cim:readCycle> | ||
| <cim:disconnectionMethod>D01</cim:disconnectionMethod> | ||
| <cim:nextReadingDate></cim:nextReadingDate> | ||
| <cim:ratedCurrent unit="AMP">1000</cim:ratedCurrent> | ||
| <cim:connectionState>D03</cim:connectionState> | ||
| <cim:physicalConnectionCapacity> | ||
| <cim:value>1000</cim:value> | ||
| <cim:unit>KWH</cim:unit> | ||
| </cim:physicalConnectionCapacity> | ||
| <cim:firstCustomer_MarketParticipant.mRID codingScheme="NLU">a</cim:firstCustomer_MarketParticipant.mRID> | ||
| <cim:firstCustomer_MarketParticipant.name>String</cim:firstCustomer_MarketParticipant.name> | ||
| <cim:secondCustomer_MarketParticipant.mRID codingScheme="NRU">a</cim:secondCustomer_MarketParticipant.mRID> | ||
| <cim:secondCustomer_MarketParticipant.name>String</cim:secondCustomer_MarketParticipant.name> | ||
| <cim:marketAgreement.contractedConnectionCapacity> | ||
| <cim:value>500</cim:value> | ||
| <cim:unit>KWH</cim:unit> | ||
| <cim:multiplier>k</cim:multiplier> | ||
| </cim:marketAgreement.contractedConnectionCapacity> | ||
| <cim:meter.mRID>012345678912345</cim:meter.mRID> | ||
| <cim:Series> | ||
| <cim:estimatedAnnualVolume_Quantity.quantity>110</cim:estimatedAnnualVolume_Quantity.quantity> | ||
| <cim:quantity_Measure_Unit.name>KWH</cim:quantity_Measure_Unit.name> | ||
| <cim:product>8716867000030</cim:product> | ||
| </cim:Series> | ||
| <cim:register.rightDigitCount>100</cim:register.rightDigitCount> | ||
| <cim:register.leftDigitCount>100</cim:register.leftDigitCount> | ||
| <cim:register.channels.readingType.accumulation>D01</cim:register.channels.readingType.accumulation> | ||
| <cim:register.channels.readingType.multiplier>0</cim:register.channels.readingType.multiplier> | ||
| <cim:register.channels.readingType.unit>MTQ</cim:register.channels.readingType.unit> | ||
| <cim:inMeteringGridArea_Domain.mRID codingScheme="NLV">870</cim:inMeteringGridArea_Domain.mRID> | ||
| <cim:usagePointLocation.mainAddress> | ||
| <cim:streetDetail> | ||
| <cim:number>String</cim:number> | ||
| <cim:name>String</cim:name> | ||
| <cim:type>String</cim:type> | ||
| <cim:code>String</cim:code> | ||
| <cim:buildingName>String</cim:buildingName> | ||
| <cim:suiteNumber>String</cim:suiteNumber> | ||
| <cim:floorIdentification>String</cim:floorIdentification> | ||
| </cim:streetDetail> | ||
| <cim:townDetail> | ||
| <cim:code>String</cim:code> | ||
| <cim:section>String</cim:section> | ||
| <cim:name>String</cim:name> | ||
| <cim:stateOrProvince>String</cim:stateOrProvince> | ||
| <cim:country>AA</cim:country> | ||
| </cim:townDetail> | ||
| <cim:status> | ||
| <cim:value>String</cim:value> | ||
| <cim:dateTime>2021-06-17T09:30:47Z</cim:dateTime> | ||
| <cim:remark>String</cim:remark> | ||
| <cim:reason>String</cim:reason> | ||
| </cim:status> | ||
| <cim:postalCode>String</cim:postalCode> | ||
| <cim:poBox>String</cim:poBox> | ||
| <cim:language>String</cim:language> | ||
| </cim:usagePointLocation.mainAddress> | ||
| <cim:usagePointLocation.officialAddressIndicator>true</cim:usagePointLocation.officialAddressIndicator> | ||
| <cim:usagePointLocation.geoInfoReference>a</cim:usagePointLocation.geoInfoReference> | ||
| <cim:meteringGridArea_Domain.mRID codingScheme="NKZ">870</cim:meteringGridArea_Domain.mRID> | ||
| <cim:outMeteringGridArea_Domain.mRID codingScheme="NAT">871</cim:outMeteringGridArea_Domain.mRID> | ||
| <cim:parent_MarketEvaluationPoint.mRID codingScheme="NSE">a</cim:parent_MarketEvaluationPoint.mRID> | ||
| <cim:parent_MarketEvaluationPoint.description>E17</cim:parent_MarketEvaluationPoint.description> | ||
| <cim:linked_MarketEvaluationPoint.mRID codingScheme="NNL">571234567891234636</cim:linked_MarketEvaluationPoint.mRID> | ||
| <cim:mktPSRType.psrType>B14</cim:mktPSRType.psrType> | ||
| <cim:accountingPointResponsible_MarketParticipant.mRID codingScheme="NNO">a</cim:accountingPointResponsible_MarketParticipant.mRID> | ||
| </cim:MarketEvaluationPoint> | ||
| <cim:businessProcessReference_MktActivityRecord.mRID>String</cim:businessProcessReference_MktActivityRecord.mRID> | ||
| <cim:start_DateAndOrTime.dateTime>2021-07-01T22:00:00Z</cim:start_DateAndOrTime.dateTime> | ||
| </cim:MktActivityRecord> | ||
| </cim:RequestChangeAccountingPointCharacteristics_MarketDocument>`, | ||
| languages: ['xml'], | ||
| lineNumbers: true, | ||
| }; | ||
|
|
||
| export const JsonWithLineNumbers = Template.bind({}); | ||
|
|
||
| JsonWithLineNumbers.args = { | ||
| code: `{ "foo": "bar" }`, | ||
| languages: ['json'], | ||
| lineNumbers: true, | ||
| }; |
Oops, something went wrong.