Die Anwendung soll nicht aussehen wie your company’s-app. Ein Designer entwirft das Layout, das UI und die Darstellung der Auswertung, hier die „Übersicht“. Das Design ist umgesetzt in ein 4D Formular. Das Bildschirmfoto ist vom 4D Formular. Links die Navigationsleiste, rechts eine Listbox zur Filialen-Auswahl und in der Mitte die eigentliche Nutzlast. Ohne SVG, wäre das eine Schweinearbeit.
Vom Designer bekomme ich eine Illustrator-generierte SVG-Datei der Auswertung. Die öffne ich mit Sketch, werfe Illustrator-Müll raus, regruppiere aus meiner „wie bekomme ich die Daten rein“-Sicht und benenne die Gruppen und Elemente nach meiner Vorliebe. Dann exportiere ich die 3 Teile: Balkengraphik Gesamtumsatz, Umsatz Monat/Vormonat und die Tages-Auswertung nach Filialen als SVG-Vorlagen. Die Umsatz-Übersicht wird dargestellt in einer WebArea, WebKit rendern das SVG.
Um den Teil Tages-Auswertung nach Filialen geht es hier. Für jede ausgewählte Filiale gibt es einen Polygonzug in der Farbe der Filiale. Die Polygonzüge zu zeichnen sind mit der Komponente 4D SVG wenige Zeilen Code. Die Dekoration drumherum in 4D-Code zu zeichnen könnte auch mit 4D SVG in viel Programmier-Aufwand ausarten.
In diesem Fall brauche ich ein „SVG eingebettet in ein SVG“. Darum geht es in diesen Forums Beitrag, andere habe ich nicht gefunden. Leider ist dort die Lösung auch nicht beschrieben. Deshalb will ich hier das Konzept dokumentieren.
Wie einbetten?
Es gilt in den Rahmen der vier horizontalen Linien (Strich_Q1 bis Strich_Q4) und der vertikalen Line am linken Rand (Strich_Y) den SVG-Chart einzupflanzen.
SVG ist Text und so sieht der Rahmen als Text aus. Die Gruppe hat die ID „Hilfslinien“ und in der Gruppe sind die 5 Linien = path. Das eigentliche SVG interessiert nicht, ich will nur meine Namen wiederfinden.
<g id="Hilfslinien" transform="translate(114.000000, 40.000000)" stroke="#B9B9B9" sketch:type="MSShapeGroup">
<path d="M0.5,1 L0.5,206" id="Strich_Y"></path>
<path d="M1,0.5 L546,0.5" id="Strich_Q4"></path>
<path d="M1,53.5 L546,53.5" id="Strich_Q3"></path>
<path d="M1,106.5 L546,106.5" id="Strich_Q2"></path>
<path d="M1,159.5 L546,159.5" id="Strich_Q1"></path>
</g>
Damit die Koordinaten unabhängig von der Position auf der Seite werden, verschiebt transform="translate(114.000000, 40.000000)" die Pfade zur Darstellung auf die Papierposition. Genau so will ich das auch haben. Deshalb unterhalb im Text und in der Darstellung dann oberhalb der Hilfslinien werde ich den SVG-Chart einzusetzen. Also Gruppe kopieren, stroke, sketch:type und die paths löschen. Dann anstelle der paths mein 4D Tag einsetzen.
<g id="Chart_Container" transform="translate(114.000000, 40.000000)">
<!--4DHTML svgGraphFilialen-->
</g>
Das SVG wird mit dieser Funktion in die 4D Variable svgGraphFilialen exportiert
svgGraphFilialen:=SVG_Export_to_XML ($svgRef)
Ist das SVG in die Variable exportiert,wird das Template.svg geladen und mit PROCESS 4D TAGS umgeformt. Das es funktioniert, sehen Sie im Bildschirm-Foto.
Das SVG_Template zum Download und zum Vergleich das SVG_Resultat zum Download.
Ja, wir könnten einen Workshop anbieten …
Your application should not look like your company’s-app. A designer draws the concepts for UI and reports, like „Übersicht“, which is a comprehensive view on monthly performance. The design is used to build this 4D form. The screenshot is from the 4D app. On the left the navigation, on the right a listbox to select subsidiaries and the payload is center. Without SVG a nightmare.
The designer delivered a Illustrator-made SVG. I prefer Sketch to work on SVGs. Firstly I throw out all Illustrator-garbage, then regroup for the purpose „how to get the data in“. Next naming of groups and elements according to my preferences. Finally I export logical parts of the drawing as SVG to be transformed into templates. In this case I exported three parts: columnchart, revenue month/last month and a chart with daily revenues for selected subsidiaries. The comprehensive view is displayed using a 4D-webarea, i.e. WebKit renders the SVG.
How to create the daily revenues-chart is the point of this article. Every subsidiary gets a polyline in the subsidiaries color. Drawing polylines is as easy as SVG_New_polyline_by_arrays using component 4D SVG. Then there is decoration at x- and y-achses, which makes no sense to draw by 4D SVG-code. Keeping the chart flexible could mean a lot of 4D-code to be generated and maintained, when done completely by 4D SVG.
Actually I do need a „SVG Embedded within SVG“. There is a single Forum Entry about that. Sorrily no helpful howto-proposal there. So I need to write the concept of the howto myself.
Howto embed?
There is a chart-placeholder of four horizontal lines (Strich_Q1 bis Strich_Q4) and a vertical line at the left edge (Strich_Y) where I need to embed my SVG-chart.
SVG is text and displayed as text. The chart-placeholder looks like this SVG-group <g> with ID „Hilfslinien“. Inside the group are the 5 paths. The SVG-code is not really interesting, the names are to be found.
<g id="Hilfslinien" transform="translate(114.000000, 40.000000)" stroke="#B9B9B9" sketch:type="MSShapeGroup">
<path d="M0.5,1 L0.5,206" id="Strich_Y"></path>
<path d="M1,0.5 L546,0.5" id="Strich_Q4"></path>
<path d="M1,53.5 L546,53.5" id="Strich_Q3"></path>
<path d="M1,106.5 L546,106.5" id="Strich_Q2"></path>
<path d="M1,159.5 L546,159.5" id="Strich_Q1"></path>
</g>
To have the chart-coordinates independent from the position on the page transform="translate(114.000000, 40.000000)" moves the paths to the appropriate position. That’s what I like very much: create independent charts and move them when needed. Beneath the group of id=“Hilfslinien“ and drawn atop when rendering I embed my SVG-Chart. As easy as this: copy group, remove stroke, sketch:type and all paths. Then paste my 4D Tag as shown.
<g id="Chart_Container" transform="translate(114.000000, 40.000000)">
<!--4DHTML svgGraphFilialen-->
</g>
My code-generated SVG-chart gets exported into the 4D variable svgGraphFilialen using this function
svgGraphFilialen:=SVG_Export_to_XML ($svgRef)
After exporting the SVG into the variable, I load the Template.svg and expand the code using PROCESS 4D TAGS. That embedding works, is shown in screenshot.
Template for download and for comparison resultat for download.
Yep, we could provide a workshop …